Question

记下这个表格行，我试图动态启用/禁用相应的复选框：

＆＃13;

function enableTheRoles(data){
  var myRoles = [
    {role1: true, name: "Role One",   enabled: true},
    {role2: false, name: "Role Two",   enabled: false},
    {role3: true, name: "Role Three", enabled: true},
    {role4: false, name: "Role Four",  enabled: false},
    {role5: true, name: "Role Five",   enabled: true},
    {role6: false, name: "Role Six",   enabled: false},
    {role7: true, name: "Role Seven", enabled: true},
    {role8: false, name: "Role Eight",  enabled: false},
    {role9: true, name: "Role Nine", enabled: true},
    {role10: false, name: "Role Ten",  enabled: false}
  ];

}

＆＃13;

<tr>
<td>
  <input type="checkbox" name="role1" ng-model="ctrl.data.roles.role1" />&nbsp;Role One
</td>
<td>
  <input type="checkbox" name="role2" ng-model="ctrl.data.roles.role2" />&nbsp;Role Two
</td>
<td>
  <input type="checkbox" name="role3" ng-model="ctrl.data.roles.role3" />&nbsp;Role Three
</td>
<td>
  <input type="checkbox" name="role4" ng-model="ctrl.data.roles.role4" />&nbsp;Role Four<
</td>
</tr>

<tr>
  <td>
  <input type="checkbox" name="role5" ng-model="ctrl.data.roles.role5" />&nbsp;Role Five
</td>
<td>role six</td>
<td>role seven</td>
<td>role eight</td>
</tr>

＆＃13;

到目前为止，我已设法迭代源数据（从Angular服务返回），并创建一个名为myRoles的新数组。

我现在希望将myRoles数组绑定到我视图中的checkbox输入，因此启用/禁用。

所以换句话说，如果＆＃34;角色一＆＃34;复选框应为enabled，然后ng-model=ctrl.data.roles.role1应从enabled数组中选取myRoles属性。

也许通过ng-model迭代？

任何建议表示赞赏。与此同时，我将研究......

Answer 1

考虑使用ng-repeat指令，如下所示：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      $scope.myRoles = [
        {role1: true, name: "Role One",   enabled: true},
        {role2: false, name: "Role Two",   enabled: false},
        {role3: true, name: "Role Three", enabled: true},
        {role4: false, name: "Role Four",  enabled: false}
      ];
    });
    </script>
  </head>
  <body ng-controller="appController">
    <table>
      <tr>
        <td ng-repeat="role in myRoles">
          <input type="checkbox" name="role1" ng-model="role.enabled" />&nbsp;{{role.name}}
        </td>
      </tr>
    </table>
  </body>
</html>

更新根据回复：

你是否在布局之后：

1  2  3  4
5  6  7  8
9  10

或者这个：

1  4  7  10
2  5  8
3  6  9

对于第一个布局，这将起作用：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <style>
    .role {
      display: inline-block;
      width: 25%;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      window.x = $scope.myRoles = [
        {role1: true, name: "Role One",   enabled: true},
        {role2: false, name: "Role Two",   enabled: false},
        {role3: true, name: "Role Three", enabled: true},
        {role4: false, name: "Role Four",  enabled: false},
        {role1: true, name: "Role Five",   enabled: false},
        {role2: false, name: "Role Six",   enabled: true},
        {role3: true, name: "Role Seven", enabled: true},
        {role4: false, name: "Role Eight",  enabled: false},
        {role1: true, name: "Role Nine",   enabled: false},
        {role2: false, name: "Role Ten",   enabled: false}
      ];
    });
    </script>
  </head>
  <body ng-controller="appController">
    <span class="role" ng-repeat="role in myRoles">
      <input type="checkbox" name="role1" ng-model="role.enabled" />&nbsp;{{role.name}}
    </span>
  </body>
</html>

Angular 1.6 - 通过ng-model将对象数组绑定到复选框输入的最佳方法

1 个答案: