IONIC:喜欢`ng-repeat`中的不喜欢功能

时间:2017-04-20 13:35:45

标签: ios angularjs ionic-framework

我是离子框架的新手。目前我正在研究离子iOS应用程序。我需要像不喜欢功能一样。由于我有来自网络服务的多条记录,并且对于每条记录,我必须将类似,不喜欢和评论的功能与总计数相关联,并将这些信息保存到database

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

我不明白如何在我的应用程序中建立此功能。请帮我这样做。

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;

这里也是小提琴: https://jsfiddle.net/Lxwbeeat/