如何在ng-repeat上分配重分配复选框ng-model

How to assign reassign checkbox ng-model on ng-repeat

本文关键字：分配 ng-model 复选框 ng-repeat      更新时间：2023-09-26

请帮帮我。我有一个已定义模型的复选框。我正在显示复选框，并使用模型来设置复选框是否被选中。下面是设置ng-model的代码。

LoadValues(obj) {
  vm.index = false;
  vm.create = false;
  vm.edit = false;
  vm.delete = false;
  vm.other = false;
  var pList = obj.Functions;
  var currentModule = obj.Name;
  for (var i = 0; i < pList.length; i++) {
    var currentItem = pList[i];
    console.log(currentItem)
    if (currentItem.search("Index") > 0) {
      vm.index = true;
      console.log(vm.index);
    } else if (currentItem.search("Create") > 0) {
      vm.create = true;
    } else if (currentItem.search("Edit") > 0) {
      vm.edit = true;
    } else if (currentItem.search("Delete") > 0) {
      vm.delete = true;
    } else if (currentItem.search("Other") > 0) {
      vm.other = true;
    }
  }
}

下面是复选框。

<tbody>
  <tr ng-repeat="item in list">
    <td>
      {{item.Name}}
    </td>
    <td>
      <input id="Index" type="checkbox" ng-model="vm.index" ng-click="EditRole(Right,item.Module,'Index')">
    </td>
    <td>
      <input id="Create" type="checkbox" ng-model="vm.create" ng-click="EditRole(item.Role,'Create')">
    </td>
    <td>
      <input id="Edit" type="checkbox" ng-model="vm.edit" ng-click="EditRole(item.Role,item.Module,'Edit')">
    </td>
    <td>
      <input id="Delete" type="checkbox" ng-model="vm.delete" ng-click="EditRole(item.Role,item.Module,'Delete')">
    </td>
    <td>
      <input id="Other" type="checkbox" ng-model="vm.other" ng-click="EditRole(item.Role,item.Module,'Other')">
    </td>
  </tr>
</tbody>

问题是它将相同的ng-model分配给列表中的所有项目。我试图找到解决办法，但都无济于事。非常感谢您的帮助。

我正在从json文件读取我的数据。下面是一些示例数据:

    [ 
{"Role":"Staff","Admins":[{"Name":"Username","userRights":["UserEdit","UserCreate"]
    }]

在复选框上使用ng-model最简单的方法是传递一个对象给它。下面的代码将项数组转换为复选框的对象。

我创建了一个名为$scope.userRights的变量，它包含了所有可用的选项。

在HTML中，我们循环遍历显示其名称的每个字段，然后循环遍历所有userRights。

提交按钮然后将对象转换回我们接收到的数组格式。

HTML 

<div ng:controller="MainCtrl">
  <button ng-click="submit()">Submit</button>
  <table>
    <tr ng-repeat="field in fields">
      <td ng-bind="field.Name"></td>
      <td ng-repeat="right in userRights">
        <label>
          <input type="checkbox" ng-model="field.userRights[right]" /> {{right}} 
        </label>
      </td>
    </tr>
  </table>
  <pre ng-bind="fields | json"></pre>
</div>
JavaScript 

app.controller('MainCtrl', function($scope) {
  $scope.userRights = ["UserEdit","UserCreate","UserSomethingElse"];
  $scope.fields = [
    {"Name":"Username","userRights":["UserEdit","UserCreate"]},
    {"Name":"Password","userRights":["UserEdit"]}
  ];
  // Convert array to object
  $scope.fields.forEach(function(field) {
    var res = {};
    field.userRights.forEach(function(right) {
     res[right] = true;
    });
    field.userRights = res;
  });
  function objectValues(obj) {
    var res = [];
    var keys = Object.keys(obj);
    for (var i=0; i<keys.length; i++) {
      if (obj[keys[i]]) res.push(keys[i]);
    }
    return res;
  }
  // Convert object to array
  $scope.submit = function() {
    $scope.fields.forEach(function(field) {
      field.userRights = objectValues(field.userRights);
    });
  };
});
演示

你的ng-model必须是这样的:

ng-model="item.index"

然后在控制器的for循环中:

current_item.index = true;

希望能有所帮助=)

相关文章：