Question

我想用离子1 /角度js创建类似按钮。

问题是，类似的按钮在ng-repeat中不能与ng-model一起使用，因为所有ng-model都有相同的名称。

这是到目前为止的HTML。

<div ng-repeat="item in items">
 <div class = "item item-text-wrap">
          <button class="button button-block icon ion-thumbsup" ng-model="islike" ng-class="islike== true?'button-on':'button-light'" ng-click="changeLikeState(item.id);"> Like</button>
       </div>
</div>

如果用户已经喜欢这个项目，我想初始化按钮状态。如果用户已经喜欢该项目，则islike设置为true，否则islike设置为false。

我想创建一个函数来检查$http.get调用状态，并根据结果设置islike 问题是有多个项目具有相同的问题，如何在item.id中设置ng-model="islike"以识别特定按钮？

这是正确的做法吗？如何在ionic / angularjs中解决这个问题？

Answer 1

如上所述，评论islike应该是对象中每个项目的属性，例如： -

让我们假设你的收藏看起来像

 $scope.items = [{ name: 'pan cakes', islike: false }, 
              { name: 'pea nut butter', islike: true },
              { name: 'pizza', islike: true }]

以及其他属性如果还有id相关联，那就足够了，否则您始终可以使用$index中的ng-repeat来跟踪当前item in items

您的代码可能看起来像这样： -

<div ng-repeat="item in items track by ($index)">
     <div class = "item item-text-wrap">
          <button class="button button-block icon ion-thumbsup" ng-model="item.islike" ng-class="item.islike == true?'button-on':'button-light'" ng-click="changeLikeState($index);"> Like</button>
     </div>
</div>

注意更改track by而不是islike而不是item.islike

Answer 2

按钮不需要ng-model。只需将对象传递到您的函数ng-click即可触发任何更改。这是一个演示：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.items = [
    {"islike":false,"id":1},
    {"islike":false,"id":2},
    {"islike":false,"id":3},
  ];
  $scope.changeLikeState = function(item) {
    item.islike = !item.islike;
    console.log(item.id);
  }
});

.button-on {
  color: blue;
  font-weight: bold;
}

.button-light {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in items">
    <button ng-class="{'button-on':item.islike,'button-light':!item.islike}" ng-click="changeLikeState(item);">
      Like
    </button>
  </div>
</div>

在ng-repeat ionic 1 angularjs

2 个答案: