0

考虑到这个表格行，我正在尝试动态启用/禁用相应的复选框：

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}
  ];

}
<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>

到目前为止，我已经成功地迭代了源数据（从 Angular 服务返回），并创建了一个名为myRoles.

我现在想将myRoles数组绑定到checkbox我视图上的输入，因此相应地启用/禁用。

所以换句话说，如果“角色一”复选框应该是enabled，那么ng-model=ctrl.data.roles.role1应该enabled从myRoles数组中获取属性。

也许通过 ng-model 进行迭代？

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

4

1 回答 1

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>
于 2017-11-03T20:31:52.747 回答