Отметьте все галочки в AngularJS

Я новичок в AngularJS. Пожалуйста, посмотрите на это:Отметьте все галочки в AngularJS

Теперь, когда пользователь нажимает на ссылку «весь», все 11 флажков должны быть проверены и при клике пользователя на «None» ссылку, все 11 Проверьте ящики не должны быть отмечены.

Плюс, когда пользователь проверьте действительно Все остальные флажок, все нижние 9 флажки должны быть проверены и, если пользователь снимите флажок Все другие флажком, все нижние 9 флажки должен быть снят ,

Я могу достичь одной из задач одновременно, но не одновременно. Итак, может ли кто-нибудь помочь мне одновременно выполнить обе задачи?

Любая помощь будет оценена по достоинству.

источник

2015-09-15 Parth Vora

Было бы хорошо, если кто-то может дать мне Плюккеровы или jsfiddle демо, которое имеет с моей точной функциональности, т.е. оба способа проверить флажки –

Было бы даже лучше, если вы можете поделиться своей попыткой добиться этого! –

Здесь всего 9 флажков. где еще два флажка? а также отправьте свой код ... –

Вы можете использовать

HTML

<body ng-controller="MainCtrl"> 
    <button ng-click="selectAll()">Select All</button> 
    <button ng-click="clearAll()">Clear All</button> 
    <input type="checkbox" ng-model="select" ng-click="checkAll()" /> 
    <br /> 

    <p>Checkboxes</p> 
    <input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected"> 
</body>

Угловая

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.checkbox = [ 
    { 
     selected: false 
    }, 
    { 
     selected: false 
    }, 
    { 
     selected: false 
    } 
    ]; 
    // Check/uncheck all boxes 
    $scope.selectAll = function() { 
    $scope.select = true; 
    angular.forEach($scope.checkbox, function (obj) { 
     obj.selected = true; 
    }); 
    }; 

    $scope.clearAll = function() { 
    $scope.select = false; 
    angular.forEach($scope.checkbox, function (obj) { 
     obj.selected = false; 
    }); 
    }; 

    $scope.checkAll = function() { 
    angular.forEach($scope.checkbox, function (obj) { 
     obj.selected = $scope.select; 
    }); 
    }; 
});

См fiddle

источник

2015-09-15 10:26:38

большое спасибо за ваш ответ и подробное объяснение с кодом. Единственная проблема теперь в том, что мой флажок находится внутри аккордеона, который делает проблему с вашим решением. http://stackoverflow.com/questions/32604689/issue-in-angular-bootstrap-directive-while-trying-to-access-scope Любая идея, как это решить? –

Sahil Gupta, в вашем обновленном скрипте есть проблема: сначала установите флажок «Первая проверка» (рядом с кнопкой «Очистить все»), затем снимите отметку с 2-3 флажков из нижней строки флажка, теперь нажмите «Выбрать все», t проверьте эти флажки, которые вы только что сняли. Любая идея, как это решить? –

@ParthVora: Да, это проблема, потому что в соответствии с директивой углового документа «ng-checked» не следует использовать вместе с «ngModel». Это связано с тем, что ng-checked ожидает выражения, поэтому, говоря ng-checked = "true", он говорит, что флажок всегда будет проверяться по умолчанию. –

вы можете использовать ng-Checked Его делает вас легче

см ng-Checked

источник

2015-09-15 10:40:45 azad

ng-checked просто устанавливает логическое значение, а не устанавливает значение ng-модели – Schw2iizer

Html

<button ng-click="selectAll()"> all</button> 
<div ng-repeat="item in items"> 
    <input type="checkbox" ng-model="selected[item.id]"> 
    </div>

JQuery

$scope.selected = {}; 
$scope.selectAll= function(){ 
    for (var i = 0; i < $scope.items.length; i++) { 
    var item = $scope.items[i]; 
    $scope.selected[item.id] = true; 
    } 
};

источник

2015-09-15 11:08:03 saurabh

Отметьте все галочки в AngularJS

ответ

Смежные вопросы