javascript - 从角度控制器功能访问表单输入

Question

我有一个像这样的 Angular $resource：

{
  _id: '1'
  items: [
    {_id: 'a'}, {_id: 'b'}, {_id: 'c'}
  ]
}

我正在尝试构建一个表单，以便items数组中的每个元素都有一个复选框，并且在act()函数中我可以检测到该数组的哪些元素被复选框选中。

标记类似于：

<form ng-submit="act()">
  <input type="checkbox" ng-model="item._id" ng-repeat="item in items">
  <button type="submit">Submit</button>
</form>

但是，我不知道如何访问由控制器act()函数内的选中复选框表示的项目 ID 数组。

我尝试在范围内访问FormController但似乎无法从那里获取值 - 只有有效性状态。我尝试将复选框绑定到范围内的数组 usingng-model但它在act()函数中始终为空。

Answer 1

您可以动态添加一个checked对每个项目调用的字段，并且在您的控制器中，您可以访问$scope.items和过滤掉选中的项目。

<input type="checkbox" ng-model="item.checked" ng-repeat="item in items">

$scope.act = function () {
    var checkedItems = [];
    angular.forEach($scope.items, function (item) {
        if (item.checked !== undefined && item.checked) checkedItems.push(item);
    });
    console.log(checkedItems)
}

Working Demo

Answer 2

您可以将检查的值存储在一个对象中，其中键是项目的 ID。然后过滤对象以仅返回为真（选中）的值。

示例：http: //jsfiddle.net/TheSharpieOne/b3dkU/1/

全控制器：

function myCtrl($scope){
    $scope.selected = {};
    $scope.var = {
      _id: '1',
      items: [
        {_id: 'a'}, {_id: 'b'}, {_id: 'c'}
      ]
    };
    function isChecked(obj){
        var checked = [];
        for(var key in obj){
            if(obj[key])
                checked.push(key);
        }
        return checked;
    };
    $scope.act = function(){
        $scope.checked = isChecked($scope.selected);
    };
}