javascript - 将两个数组绑定(bind)到一组复选框中 - angularjs

Question

我有一个 JSON 对象，其中包含一个项目数组(具有名称和 ID)以及一个选定项目数组(其中只有先前数组中已选定项目的 ID)。

我想在 HTML 页面上呈现的是一组复选框(即每个可用项目一个复选框)，它们也将绑定(bind)到第二个选定项目数组。我知道如何在 JQuery 中做到这一点，但我想知道是否有一种干净的“angularJS 方式”来处理它并将它以某种方式绑定(bind)到模型。

因此，当页面呈现时，我希望选中某些复选框(根据第二个数组)，并且每当我选择/取消选择一个项目时，它应该从该数组中出现/消失。

希望我解释得当——我无法更改 JSON 源对象的结构，因为它是从服务器检索到的，而且我无法控制它。

下面的 JSFiddle - 它显然不起作用 - 我不知道我应该为每个复选框将 ng-model 绑定(bind)到什么。

http://jsfiddle.net/ej7mhv71/

    <span ng-repeat="item in object.stock">
      <label class="checkbox" for="{{item.id}}">
        <input type="checkbox" ng-model="object.selected[item.id]" id="{{item.id}}" />
          {{item.name}}<br/>
      </label>
    </span>



   $scope.object = {"stock":[ { "name": "Item1", "id": "1" } , 
                              {"name": "Item2", "id": "2" }, 
                              {"name": "Item3", "id": 3}], "
                    selected":{"ids":[1,2]}}

感谢任何帮助。

Answer 1

我并不是说这是最好的方法，但我在不更改 JSON 的情况下解决了您的问题。我使用 ng-init="item.IsSelected = (object.selected.ids.indexOf(item.id*1) != -1)" 让您的项目最初被选中。其次，我将函数 ng-click="removeSelectedItem(item.id,item.IsSelected)" 绑定(bind)到从您的选定项目数组中删除或添加 项目。

HTML:

<div ng-controller="Ctrl">
    <span ng-repeat="item in object.stock">
      <label class="checkbox" for="{{item.id}}">
        <input type="checkbox" ng-model="item.IsSelected" ng-init="item.IsSelected = (object.selected.ids.indexOf(item.id*1) != -1)"  id="{{item.id}}" ng-click="removeSelectedItem(item.id,item.IsSelected)" />
          {{item.name}}<br/>
      </label>
    </span>
    <pre ng-bind="object | json"></pre>    
</div>

Controller :

function Ctrl($scope) {

    $scope.object = {"stock":[ { "name": "Item1", "id": "1" } , {"name": "Item2", "id": "2" }, {"name": "Item3", "id": 3}], "selected":{"ids":[1,2]}}

    $scope.removeSelectedItem = function(itemId,isChecked){
        var selectedIndex =            $scope.object.selected.ids.indexOf(parseInt(itemId));

        var selectedItems =  $scope.object.selected.ids;
        if(isChecked){
            selectedItems.splice(selectedIndex,1);
        }
        else{
            if( selectedIndex == -1){
                selectedItems.push(parseInt(itemId))
            }
        }
    }

}

这是 fiddle :http://jsfiddle.net/ej7mhv71/1/