gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 03:07:29 25 4
gpt4 key购买 nike

考虑到此表行,我尝试动态启用/禁用相应的复选框:

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 的新数组。 .

我现在想绑定(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" />&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>

关于javascript - Angular 1.6 - 通过 ng-model 将对象数组绑定(bind)到复选框输入的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47103926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com