[英]How can I check all boxes in a nested ng-repeat by clicking a button?
[英]How can I auto check elements in nested ng-repeat?
我有一個包含ng-repeat元素的div。 這些ng-重復元素彼此相互關聯。 ng-repeat的元素有復選框。 我想要的是當top ng-repeat的元素被選中時,它應該自動檢查其他ng-repeat中的元素。 下圖顯示了元素的實際表示,下一張圖顯示了我想要實現的內容。
我確實試過這個,但它根本不起作用
<div actor-check-box ng-repeat="actor in actors">
<div create-connections class="actor\{{$index}}" >
<span><input class="checkbox-actor" type="checkbox" name="actor-checkbox" id="actor-checkbox\{{$index}}">\{{actor}}</span>
</div>
<div ng-repeat="activity in activities">
<div ng-if="actor == activity.id">
<div ng-repeat = "impact in activity.text" >
<div update-connections class="impact\{{$index}}actor\{{actors.indexOf(actor)}}" actor-id="actor\{{actors.indexOf(actor)}}">
<span><input class="checkbox-activity" type="checkbox" name="impact-checkbox" id="activity-checkbox\{{$index}}actor\{{actors.indexOf(actor)}}" activity-check-box>\{{impact}}</span>
</div>
<div ng-repeat="feature in features">
<div ng-if="actor == feature.id && impact == feature.key">
<div feature-connection ng-repeat = "feature in feature.text" class="feature\{{$index}}" activity-id="impact\{{activity.text.indexOf(impact)}}actor\{{actors.indexOf(actor)}}" id="">
<span><input class="checkbox" type="checkbox" name="impact-checkbox" id="" >\{{feature}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
指令代碼:
angular.module('mainModule').directive('activityCheckBox', function($interval) {
return {
restrict: 'EA',
/*replace: false,*/
scope: {
ngModel:'='
}
/*require: 'createConnections','updateConnections', 'featureConnection'*/,
/*transclude: true,*/
link: function(scope, element, attrs) {
element.find('input[type="checkbox"]').prop('checked',true);
}
};
});
angular.module('mainModule').directive('actorCheckBox', function($interval) {
return {
restrict: 'EA',
/*transclude: true,*/
link: function (scope, element, attrs, ctrl) {
console.log(element);
scope.$watch('ngModel', function(newValue){
element.find('input[type="checkbox"]').prop('activityCheckBox',true).trigger('change');
});
}
}
});
這不能使用我們檢查和取消選中元素的正常方式來實現。 我通過捕獲dom在指令中使用了emit和brodcast。 這是我寫的代碼,它的作用就像一個魅力:
angular.module('mainModule').directive('allCheckboxesBroadcast', function($interval) {
return {
restrict: 'A',
controller: function($scope) {
$scope.checkAll = function (model,id) {
if (model == true){
$scope.$broadcast('allCheckboxes',id, true);
}else{
$scope.$broadcast('allCheckboxes',id, false);
}
}
}
};
});
angular.module('mainModule').directive('allCheckboxesListeners', function($interval) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
attrs.$observe('actorId', function(value) {
scope.$on('allCheckboxes', function(event, id,shouldCheckAllCheckboxes) {
actorId = 'actor' + id;
if (value == actorId){
element.find('input').prop('checked', shouldCheckAllCheckboxes);
$scope.$broadcast('featureCheckboxesListeners', actorId, true);
}
});
});
}
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.