喜欢/不喜欢AngularJs中的功能

Question

我试图实现喜欢/不喜欢的功能，但它不起作用。我是这种功能的新手。

我已经添加了关于我正在尝试做什么的片段。

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.technologies = [
	                       {name:"C",likes:0,dislikes:0},
	                       {name:"C#",likes:0,dislikes:0},
	                       {name:"Java",likes:0,dislikes:0},
	                       {name:"WAD",likes:0,dislikes:0}
	                       ];
	$scope.liketech = function(technology){
		technology.technologies.likes++;
	}
	$scope.Disliketech = function(technology){
		technology.technologies.dislikes++;
	}
});

*{
margin:0px;
padding:0px;

}
html{
padding:0px;
margin:0px;
}
body{
 	font-size: 14px;
 	font-family: Arial;
 	color:#333;
 	padding:0px;
 	margin:0px;
 	
}
table,tr,th,td{
border:1px solid;
border-collapse:collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-app="myApp" ng-controller="myCtrl">
<table style="width:100%;">
<tr height="25">
<th width="25%">Technologies</th>
<th width="25%">Likes</th>
<th width="25%">Dislikes</th>
<th width="25%">Likes</th>
</tr>
<tr height="25" ng-repeat="technology in technologies">
<td>{{technology.name}}</td>
<td>{{technology.likes}}</td>
<td>{{technology.dislikes}}</td>
<td><input type="button" value="Like" ng-click="liketech(technology);"/><input type="button" value="DisLike" ng-click="Disliketech(technology);"/></td>
</tr>
</table>
</div>

Answer 1

你的功能应该是这样的：

$scope.liketech = function(technology){
    technology.likes++;
}
$scope.Disliketech = function(technology){
    technology.dislikes++;
}

Working demo

你在ng-rtepeat有拼写错误。哪个应该是ng-repeat。

Answer 2

试试这个，

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.technologies = [{
    name: "C",
    likes: 0,
    dislikes: 0
  }, {
    name: "C#",
    likes: 0,
    dislikes: 0
  }, {
    name: "Java",
    likes: 0,
    dislikes: 0
  }, {
    name: "WAD",
    likes: 0,
    dislikes: 0
  }];
  $scope.liketech = function(index,tech) {
    like= parseInt(tech.likes);
    $scope.technologies[index].likes = ++like;
  }
  $scope.Disliketech = function(index,tech) {
    dislike= parseInt(tech.dislikes);
    $scope.technologies[index].dislikes = ++dislike;
  }
});

* {
  margin: 0px;
  padding: 0px;
}
html {
  padding: 0px;
  margin: 0px;
}
body {
  font-size: 14px;
  font-family: Arial;
  color: #333;
  padding: 0px;
  margin: 0px;
}
table,
tr,
th,
td {
  border: 1px solid;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:100%;">
    <tr height="25">
      <th width="25%">Technologies</th>
      <th width="25%">Likes</th>
      <th width="25%">Dislikes</th>
      <th width="25%">Likes</th>
    </tr>
    <tr height="25" ng-repeat="technology in technologies">
      <td>{{technology.name}}</td>
      <td>{{technology.likes}}</td>
      <td>{{technology.dislikes}}</td>
      <td>
        <input type="button" value="Like" ng-click="liketech($index,technology);" />
        <input type="button" value="DisLike" ng-click="Disliketech($index,technology);" />
      </td>
    </tr>
  </table>
</div>

Answer 3

你可以通过$index使它工作。

$scope.liketech = function(index){
    $scope.technologies[index].likes += 1;
}
$scope.Disliketech = function(index){
    $scope.technologies[index].dislikes += 1;
}

但是，这仅适用于客户端。

您可以在控制器函数中通过$http请求执行数据库内容。

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.technologies = [
	                       {name:"C",likes:0,dislikes:0},
	                       {name:"C#",likes:0,dislikes:0},
	                       {name:"Java",likes:0,dislikes:0},
	                       {name:"WAD",likes:0,dislikes:0}
	                       ];
	$scope.liketech = function(index){
      $scope.technologies[index].likes += 1;
	}
	$scope.Disliketech = function(index){
      $scope.technologies[index].dislikes += 1;
	}
});

*{
margin:0px;
padding:0px;

}
html{
padding:0px;
margin:0px;
}
body{
 	font-size: 14px;
 	font-family: Arial;
 	color:#333;
 	padding:0px;
 	margin:0px;
 	
}
table,tr,th,td{
border:1px solid;
border-collapse:collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-app="myApp" ng-controller="myCtrl">
<table style="width:100%;">
<tr height="25">
<th width="25%">Technologies</th>
<th width="25%">Likes</th>
<th width="25%">Dislikes</th>
<th width="25%">Likes</th>
</tr>
<tr height="25" ng-repeat="technology in technologies">
<td>{{technology.name}}</td>
<td>{{technology.likes}}</td>
<td>{{technology.dislikes}}</td>
<td>
  <input type="button" value="Like" ng-click="liketech($index);"/>
 <input type="button" value="DisLike" ng-click="Disliketech($index);"/></td>
</tr>
</table>
</div>

Answer 4

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.technologies = [{
    name: "C",
    likes: 0,
    dislikes: 0
  }, {
    name: "C#",
    likes: 0,
    dislikes: 0
  }, {
    name: "Java",
    likes: 0,
    dislikes: 0
  }, {
    name: "WAD",
    likes: 0,
    dislikes: 0
  }];
  $scope.liketech = function(index,tech) {
    like= parseInt(tech.likes);
    $scope.technologies[index].likes = ++like;
  }
  $scope.Disliketech = function(index,tech) {
    dislike= parseInt(tech.dislikes);
    $scope.technologies[index].dislikes = ++dislike;
  }
});

* {
  margin: 0px;
  padding: 0px;
}
html {
  padding: 0px;
  margin: 0px;
}
body {
  font-size: 14px;
  font-family: Arial;
  color: #333;
  padding: 0px;
  margin: 0px;
}
table,
tr,
th,
td {
  border: 1px solid;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:100%;">
    <tr height="30">
      <th width="25%">Technologies</th>
      <th width="25%">Likes</th>
      <th width="25%">Dislikes</th>
      <th width="25%">Likes</th>
    </tr>
    <tr height="25" ng-repeat="technology in technologies">
      <td>{{technology.name}}</td>
      <td>{{technology.likes}}</td>
      <td>{{technology.dislikes}}</td>
      <td>
        <input type="button" value="Like" ng-click="liketech($index,technology);" />
        <input type="button" value="DisLike" ng-click="Disliketech($index,technology);" />
      </td>
    </tr>
  </table>
</div>