Question

我有一个JSON对象，其中包含一个项目数组（具有名称和ID）以及一个选定项目数组（这些项目只包含已选择的上一个数组中项目的ID）。

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

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

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

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

    <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)"绑定到选定项阵列中的删除或添加项。

<强> 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))
            }
        }
    }

}

这里是小提琴：http://jsfiddle.net/ej7mhv71/1/

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

1 个答案: