Question

请帮帮我。我有一个定义模型的复选框。我正在显示复选框并使用模型来设置是否选中了复选框。以下是设置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"]
    }]

Answer 1

您的ng模型必须如此：

ng-model="item.index"

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

current_item.index = true;

希望有帮助=）

Answer 2

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

我创建了一个名为$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);
    });
  };
});

Demo

如何在ng-repeat

2 个答案: