将两个数组绑定到一组复选框中 - angularjs

Question

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

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

因此，当页面呈现时，我希望选中某些复选框（根据第二个数组），并且每当我 select/deselect 一个项目时，它应该 appear/disappear 来自该数组。

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

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

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)" 绑定到 Remove or Add item from your Selected Item Array。

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>

控制器：

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/

将两个数组绑定到一组复选框中 - angularjs

Bind two arrays into one group of checkboxes - angularjs

javascript

checkbox

angularjs