Javascript 使用my ng repeat将不确定包含在复选框中
我需要在我的复选框上设置一个不确定的状态,但我自己无法设置(目前正在学习) 我想要实现的目标: 当至少检查了一个Javascript 使用my ng repeat将不确定包含在复选框中,javascript,angularjs,checkbox,parent-child,Javascript,Angularjs,Checkbox,Parent Child,我需要在我的复选框上设置一个不确定的状态,但我自己无法设置(目前正在学习) 我想要实现的目标: 当至少检查了一个授权(子项)时,类别(父项)将是“不确定的”。 当至少选中一个类别(父项)时,用户(祖父母)将“不确定” HTML: <div class="row band" ng-show="authToolbar.resultList.length !== 0"> <div class="col-xs-12"> <div class="row
授权
(子项)时,类别
(父项)将是“不确定的”。当至少选中一个
类别
(父项)时,用户
(祖父母)将“不确定”
HTML:
<div class="row band" ng-show="authToolbar.resultList.length !== 0">
<div class="col-xs-12">
<div class="row serverItem serverBox" id="{{user.UserId}}" ng-repeat="user in authToolbar.resultList track by user.UserId" title="User">
<div class="col-xs-12 enfant">
<div class="col-xs-1">
<a type="button"
class="btn btn-lg btn-outline flat-btn-primary"
data-toggle="collapse"
data-target="{{'#user' + user.UserId}}"
aria-expanded="false">
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
<i class="fa fa-minus-square-o" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-5">
<i class="fa fa-user"></i> <span ng-bind-html="user.Name"></span>
</div>
<div class="col-xs-5">
<md-checkbox class="md-primary" aria-label="Disabled" name="user" ng-model="user.Enabled" ng-change="ckMasterChange(user)"></md-checkbox>
</div>
</div>
<div id="{{'user' + user.UserId}}" class="row collapse">
<div class="row" ng-repeat="category in user.AuthorizationCategory track by $index" title="Category">
<div class="col-xs-12 enfant">
<div class="col-xs-1">
<a type="button"
class="btn btn-lg btn-outline flat-btn-primary"
data-toggle="collapse"
data-target="{{'#user' + user.UserId + '-category' + category.Name}}"
aria-expanded="false">
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
<i class="fa fa-minus-square-o" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-5">
<i class="fa fa-cubes"></i> <span ng-bind-html="category.Name"></span>
</div>
<div class="col-xs-5">
<md-checkbox class="md-primary" aria-label="Disabled" name="category" ng-model="category.Enabled" ng-change="ckChange(category); categoryChanged(user, category);" /></md-checkbox>
</div>
</div>
<div id="{{'user' + user.UserId + '-category' + category.Name}}" class="row collapse">
<div class="row" ng-repeat="authorization in category.Authorizations track by $index" title="Authorization">
<div class="col-xs-12 enfant">
<div class="col-xs-1">
</div>
<div class="col-xs-5">
<i class="fa fa-cube"></i> <span ng-bind-html="authorization.Name"></span>
</div>
<div class="col-xs-5">
<md-checkbox class="md-primary" aria-label="Disabled" name="authorization" ng-model="authorization.Enabled" ng-change="authorizationChanged(category, authorization)" /></md-checkbox>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
非常感谢您抽出时间
(function () {
"use strict";
/*global angular,$*/
var authorizationsController = function ($scope, AuthToolbar, authorizationsService) {
var parentScope = $scope.$parent;
$scope.ckChange = function (category) {
angular.forEach(category.Authorizations, function (childAuthorization) {
childAuthorization.Enabled = category.Enabled;
});
};
$scope.ckMasterChange = function (user) {
angular.forEach(user.AuthorizationCategory, function (childCategory) {
childCategory.Enabled = user.Enabled;
angular.forEach(childCategory.Authorizations, function (childAuthorization) {
childAuthorization.Enabled = user.Enabled;
});
});
};
$scope.authorizationChanged = function (category, authorization) {
var allIdentical = true;
angular.forEach(category.Authorizations, function (childAuthorization) {
if (childAuthorization.Enabled !== authorization.Enabled) {
allIdentical = false;
}
});
if (allIdentical) {
category.Enabled = authorization.Enabled;
}
else {
category.Enabled = false;
}
};
$scope.categoryChanged = function (user, category) {
var allIdentical = true;
angular.forEach(user.AuthorizationCategory, function (childCategory) {
if (childCategory.Enabled !== category.Enabled) {
allIdentical = false;
}
});
if (allIdentical) {
user.Enabled = category.Enabled;
}
else {
user.Enabled = false;
}
};
function loadUsers() {
parentScope.tabAuthLoading = true;
$scope.tabAuthLoaded = false;
$scope.authLoaded = false;
authorizationsService.list()
.then(
function (data) {
//console.log(data);
if ($scope.authToolbar) {
$scope.authToolbar.resetFilter();
$scope.authToolbar.setSourceList(data);
}
else {
$scope.authToolbar = new AuthToolbar(data);
}
$scope.authToolbar.buildList();
$scope.authLoaded = true;
},
function () {
$scope.authLoaded = false;
}
)
.finally(function () {
parentScope.tabAuthLoading = false;
$scope.tabAuthLoaded = true;
});
};
function initController() {
loadUsers();
}
initController();
};
authorizationsController.$inject = [
'$scope',
'AuthToolbar',
'authorizationsService'
];
angular.module('PortalApp')
.controller('AuthorizationsController', authorizationsController);
}());