ios - ionic : Like dislike functionality within `ng-repeat`

Question

我是 ionic 框架的新手。目前我正在开发 ionic iOS 应用程序。我需要做喜欢不喜欢的功能。由于我有来自网络服务的多条记录，对于每条记录，我必须将喜欢、不喜欢和评论的功能与总数一起保存，并将这些信息保存到数据库中。

同时更改喜欢和不喜欢按钮的 CSS。

我不明白如何在我的应用程序中建立这个功能。请帮助我做到这一点。

Answer 1

试试这个方法:

angular.module('main',[]).controller('mainController', function($scope, $http){

  $scope.items = [
    {"id":1,"title": "item1", "like": false},
    {"id":2,"title": "item2", "like": true},
    {"id":3,"title": "item3", "like": false},
    {"id":4,"title": "item4", "like": true},
    {"id":5,"title": "item5", "like": false},
    {"id":6,"title": "item6", "like": true},
    {"id":7,"title": "item7", "like": false},
    {"id":8,"title": "item8", "like": false},
    {"id":9,"title": "item9", "like": true},
    {"id":10,"title": "item10", "like": false},
    
  
  ];
  
  $scope.toggle_like = function(item){
      
      //send item.id to HTTP Call to change id in DB and execute following statement in success callback
      item.like = !item.like;
  
  }

})

.fake_link:hover{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="main" ng-controller="mainController">
<table>
<thead>
  <tr>
    <th> Title </th>
    <th> Like </th>
  
  </tr>

</thead>
<tbody>
  <tr ng-repeat="item in items">
    <td> {{item.title}} </td>
    <td ng-click="toggle_like(item)" class="fake_link"> <span ng-if="item.like"> Unlike </span> <span ng-if="!item.like"> Like </span> </td>
  </tr>

</tbody>
</table>
</div>

这也是工作 fiddle : https://jsfiddle.net/Lxwbeeat/