个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
考虑到此表行，我尝试动态启用/禁用相应的复选框:
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 的新数组。 .
我现在想绑定(bind) myRoles数组到checkbox输入我的 View ，因此相应地启用/禁用。
换句话说，如果“Angular 色一”复选框应该是 enabled ，然后ng-model=ctrl.data.roles.role1应该拿起enabled属性来自myRoles数组。
也许通过 ng-model 进行迭代？
如有任何建议，我们将不胜感激。与此同时，我会研究...
最佳答案
考虑使用 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>
关于javascript - Angular 1.6 - 通过 ng-model 将对象数组绑定(bind)到复选框输入的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47103926/
25
4
0
我是一名优秀的程序员,十分优秀！