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

Bind two arrays into one group of checkboxes - angularjs

本文关键字：一组 复选框 angularjs 绑定 两个 数组      更新时间：2023-09-26

我有一个JSON对象，其中包含一个项目数组（具有名称和id）和一个选定项目的数组（其中仅具有已选择的先前数组中的项目的ID）。

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

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

希望我解释得当 - 我无法更改 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]}}

任何帮助表示赞赏。

我并不是说这是最好的方法，但我在不更改 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/

相关文章：