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++;
}

工作演示

您在ng-rtepeat有錯字。 應該是ng-repeat 。

Answer 2

您可以通過$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 3

嘗試這個，

 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 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>