如何清除 ng-repeat 中的所有复选框？

Question

I have this method for get the value from objects selected, and the ".length" for indicate at the user how many objects are selected. but I would like to have a Cancel button and clear all the checkboxes and reset my ".length"

$scope.selection = [];
$scope.toggleSelection = function toggleSelection(image) {


    var idx = $scope.selection.indexOf(image);
    // is currently selected
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }
    // is newly selected
    else {
        $scope.selection.push(image);
    }

    $scope.totalitems = $scope.selection.length;

    $scope.itemobject = {
        'attachments': $scope.selection
    };

this is my ng-repeat:

<ul ng-repeat="image in images | filter:query as attachmensresults">
                        <li>
                            <div class="cbxdelete">
                                <input class="checkbx" id="ckBox" type="checkbox" value="{{image.id}}" ng-checked="selection.indexOf(image.id) > -1" ng-click="toggleSelection(image.id)" />
                            </div>
                            <a href="{{image._links.file.href}}" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
                                <div class="img-preview">
                                    <img ng-src="{{image._links.file.href}}" alt="" />
                                </div>
                            </a>
                        </li>
                    </ul>

Answer 1

Why not something like this?

<button ng-click="cancel()">Cancel</button>

$scope.cancel = function(){
   $scope.selection = [];
   $scope.totalitems = 0; 
   $scope.itemobject = { 'attachments': $scope.selection };
}

This will reset your selection array to be empty, so ng-checked will be false.

Answer 2

You could also add a selected property to your images array. This makes changing your model easier because you can use two-way binding with ng-model="image.selected" .

To clear all you have to loop over each image. Looping over all items is probably a bit slower then your code but I think it's less code and easier to read.

You shouldn't use ids inside of ng-repeat ( id="ckBox" ). Because ids should be unique in a page.

Please have a look at the demo below or at this jsfiddle .

If you need the selected images as a separate array you could use map to create a new array. See method post as an example.

 angular.module('demoApp', []) .controller('mainController', MainController); function MainController($filter) { var vm = this, changeAll = function(state) { angular.forEach(vm.images, function(image, index) { image.selected=state; }); }; this.images = [ {id: 1, url: 'http://lorempixel.com/400/200/sports/1/',selected: false}, {id: 2, url: 'http://lorempixel.com/400/200/sports/2/',selected: false}, {id: 3, url: 'http://lorempixel.com/400/200/sports/3/',selected: false} ]; this.cancel = function() { changeAll(false); }; this.selectAll = function() { changeAll(true); }; this.post = function() { var mapped = vm.images.map(function(image,index) { return { id: image.id, selected: image.selected }; }); alert($filter('json')(mapped)); } } MainController.$inject = ['$filter'];

 ul { list-style-type: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demoApp" ng-controller="mainController as main"> <button ng-click="main.post()">send</button> <button ng-click="main.selectAll()">all</button> <button ng-click="main.cancel()">cancel</button>{{main.images|json}} <ul ng-repeat="image in main.images"> <li> <div class="cbxdelete"> <input class="checkbx" type="checkbox" value="{{image.id}}" ng-model="image.selected" /> </div> <a href="{{image.url}}" data-lightbox="example-set" data-title="Click the right half of the image to move forward."> <div class="img-preview"> <img ng-src="{{image.url}}" alt="" /> </div> </a> </li> </ul> </div>