javascript - Ionic/Angular JS - 用于从 wordpress api 中提取的复选框项目的 ng-storage

Question

在我的应用程序中，我有一个复选框列表项，列表项的数据来自 api，我希望用户能够单击他们想要的复选框，并将其存储在 localStorage 中，如果我使用下面的代码，它检查所有选项，但确实将其存储在本地，但我希望用户能够单击他们想要的复选框，而不是选中所有复选框。代码是:

HTML:

<div ng-repeat='item in posts'>
<ul class="list">

<li class="item item-checkbox" ng-repeat='tag in item.tags'>
 <label class="checkbox">
   <input type="checkbox" ng-model="option.city">
 </label>
 <p ng-bind-html="tag.title"></p>
 </li>
</ul>
</div>

APP.JS

  $localStorage.$default({
    option: {
      'city':true
    }
  });

  $scope.option = $localStorage;
})

有什么想法吗？

Answer 1

问题出在下面一行

<input type="checkbox" ng-model="option.city">

每个复选框 DOM 元素都绑定(bind)有相同的ng-model 值。 您应该为每个复选框分配一个唯一的值。您可以使用 ng-repeat 的 $index 属性。

示例:

<li class="item item-checkbox" ng-repeat='tag in item.tags track by $index'>
 <label class="checkbox">
   <input type="checkbox" ng-model="option.city[$index]">
 </label>
 <p ng-bind-html="tag.title"></p>
 </li>