Angular 具有反向操作的清单模型复选框
Angular checklist-model checkboxes with reverse action
我正在使用 checklist-model.js 从动态生成的对象列表中获取 angular 到 select。它工作正常,但现在我需要让它反向工作,所以当我取消选中任何复选框时 - 将其放置到新数组(并在重新选中时 - 从数组中删除)。你们中的任何人都可以给我一些想法或告诉我下一步如何处理它吗?
html:
<label>
<input type="checkbox"
ng-model="check_all_domains"
ng-click="toggle_select_all()"/> all
</label>
<label ng-repeat="objects in objects_model">
<input type="checkbox"
checklist-model="objects_selected"
checklist-value="objects"
ng-checked="check_all_domains"/>
{{objects.name}}
</label>
型号:
$scope.objects_model = [
{id : '1', name: 'name1'},
{id : '2', name: 'name2'},
{id : '3', name: 'name3'},
];
$scope.objects_selected = [];
$scope.check_all_domains = false;
$scope.toggle_select_all = function() {
$scope.objects_selected = [];
};
这是现在工作的截图:
这是我希望它如何工作:
更新:工作正常DEMO
我在核对表模型中遇到了类似的问题,我已经设法创建了一个解决方法
尽管这是一个非常糟糕的解决方案,但它确实有效:
$scope.toggle_select_all = function() {
$timeout(function() {
$scope.check_all_domains = $scope.check_all_domains ? false : true;
});
if (!$scope.check_all_domains) {
angular.copy($scope.objects_model, $scope.objects_selected);
} else {
angular.copy([], $scope.objects_selected);
}
};
看到这个 plunkr:http://plnkr.co/edit/CiXO1debaDkKPHPYKNfT?p=preview
我强烈建议您寻找替代方案,因为稍后您会看到它的回报。
对我来说这很有效:http://jsfiddle.net/cjwprostar/M4vGj/6/ - Chris Waguespack
来源:https://groups.google.com/forum/#!topic/angular/KMS5hXn1OCI
更新了我的 demo 问题所以看看最终结果
<label ng-repeat="objects in objects_model" class="test">
<input type="checkbox"
checklist-model="objects_selected"
checklist-value="objects" />
<i ng-class="{checked : check_all_domains,
unchecked : !check_all_domains,
fakecheck : check_all_domains}"></i>{{objects.name}}
</label>
我正在使用 checklist-model.js 从动态生成的对象列表中获取 angular 到 select。它工作正常,但现在我需要让它反向工作,所以当我取消选中任何复选框时 - 将其放置到新数组(并在重新选中时 - 从数组中删除)。你们中的任何人都可以给我一些想法或告诉我下一步如何处理它吗?
html:
<label>
<input type="checkbox"
ng-model="check_all_domains"
ng-click="toggle_select_all()"/> all
</label>
<label ng-repeat="objects in objects_model">
<input type="checkbox"
checklist-model="objects_selected"
checklist-value="objects"
ng-checked="check_all_domains"/>
{{objects.name}}
</label>
型号:
$scope.objects_model = [
{id : '1', name: 'name1'},
{id : '2', name: 'name2'},
{id : '3', name: 'name3'},
];
$scope.objects_selected = [];
$scope.check_all_domains = false;
$scope.toggle_select_all = function() {
$scope.objects_selected = [];
};
这是现在工作的截图:
这是我希望它如何工作:
更新:工作正常DEMO
我在核对表模型中遇到了类似的问题,我已经设法创建了一个解决方法
尽管这是一个非常糟糕的解决方案,但它确实有效:
$scope.toggle_select_all = function() {
$timeout(function() {
$scope.check_all_domains = $scope.check_all_domains ? false : true;
});
if (!$scope.check_all_domains) {
angular.copy($scope.objects_model, $scope.objects_selected);
} else {
angular.copy([], $scope.objects_selected);
}
};
看到这个 plunkr:http://plnkr.co/edit/CiXO1debaDkKPHPYKNfT?p=preview
我强烈建议您寻找替代方案,因为稍后您会看到它的回报。
对我来说这很有效:http://jsfiddle.net/cjwprostar/M4vGj/6/ - Chris Waguespack
来源:https://groups.google.com/forum/#!topic/angular/KMS5hXn1OCI
更新了我的 demo 问题所以看看最终结果
<label ng-repeat="objects in objects_model" class="test">
<input type="checkbox"
checklist-model="objects_selected"
checklist-value="objects" />
<i ng-class="{checked : check_all_domains,
unchecked : !check_all_domains,
fakecheck : check_all_domains}"></i>{{objects.name}}
</label>