考虑到这个表格行，我正在尝试动态启用/禁用相应的复选框：
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" /> Role One
</td>
<td>
<input type="checkbox" name="role2" ng-model="ctrl.data.roles.role2" /> Role Two
</td>
<td>
<input type="checkbox" name="role3" ng-model="ctrl.data.roles.role3" /> Role Three
</td>
<td>
<input type="checkbox" name="role4" ng-model="ctrl.data.roles.role4" /> Role Four<
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="role5" ng-model="ctrl.data.roles.role5" /> 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应该从myRoles数组中获取enabled属性。
也许通过 ng 模型进行迭代？
任何建议不胜感激。与此同时，我将研究...
考虑使用 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" /> {{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" /> {{role.name}}
</span>
</body>
</html>