Squeak.ru - шаблоны программирования

Угловые флажки Выбрать все функции, при этом изначально выбрано только одно поле

У меня есть форма, содержащая 3 флажка: «Выбрать все», «Вариант 1» и «Вариант 2».

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll" checked>Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>

При начальной загрузке страницы я хочу, чтобы был отмечен только вариант 1. Затем, если установлен флажок Выбрать все, он должен автоматически проверять вариант 1 и вариант 2, чтобы были выбраны все.

Проблема заключается в том, что при начальной загрузке страницы выполняется оценка ng-checked = "selectAll", которая отменяет мою попытку изначально проверить только вариант 1 (изначально selectAll = false), поэтому ничего не выбрано.

Это кажется простой проблемой для решения, но я не могу найти решения ... Заранее благодарим за любые идеи или советы!

checkbox html angularjs angularjs-ng-model
12.12.2014

Ответы:


1

Другой способ сделать это - использовать модель для опций, установить выбор по умолчанию в модели и заставить ваш контроллер обрабатывать логику выбора всего.

angular.module("app", []).controller("ctrl", function($scope){
  
  $scope.options = [
    {value:'Option1', selected:true}, 
    {value:'Option2', selected:false}
  ];
  
  $scope.toggleAll = function() {
     var toggleStatus = !$scope.isAllSelected;
     angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });
   
  }
  
  $scope.optionToggled = function(){
    $scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script>
<div ng-app="app" ng-controller="ctrl">
<form id="selectionForm">
    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all
    <br>
     <div ng-repeat = "option in options">
        <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}
     </div>
</form>
  {{options}} 
</div>

12.12.2014
  • На самом деле это лучший способ сделать это. 13.12.2014
  • Спасибо за Ваш ответ. Кажется, что это гораздо более угловатый способ реализовать этот тип функциональности. 13.12.2014
  • @CumuloNimbus Добро пожаловать. Добавлен метод автоматической проверки флажка selectAll, если вы вручную установите все флажки, и наоборот ... 13.12.2014
  • @CumuloNimbus Также обратите внимание, что я использую array.every, чтобы это работало в старых браузерах, вам потребуется добавить прокладку, упомянутую в связанной документации MDN. 13.12.2014
  • Джинкс;) - Обещаю, я не копировал твою работу, но они странно похожи, если ты видишь мой плункер. 13.12.2014
  • @ Дилан о нет !! я никогда ничего не говорил ..: D Фактически, я только что обновил свой ответ, забыл о переключении наоборот ..: P 13.12.2014
  • @PSL В вашем решении обнаружена одна ошибка. Если флажок «Выбрать все» установлен и пользователь снимает флажок, необходимо также снять флажок «Вариант 1» и «Вариант 2». 13.12.2014
  • @CumuloNimbus ты проверял мою демонстрацию? 13.12.2014
  • @PSL nvm, ты меня опередил! Спасибо еще раз 13.12.2014
  • @PSL Я совершенно чокнутый, это может быть трудно сказать в тексте, ты слишком быстрый человек !! Быстрая розыгрыш - я догоню :) 13.12.2014
  • @ Дилан, ха-ха, ты слишком великодушен ..: D 13.12.2014
  • ! important: обратите внимание, что это изменит значение модели для элементов коллекции и отразит это в пользовательском интерфейсе, как отмечено, однако это по-прежнему не запускает ng-change выражение-оценка. 19.02.2016
  • Выражение @Cody: ng-change НЕ будет оцениваться, потому что значение модели флажка изменяется программно, а не при взаимодействии пользователя с флажком. См. docs.angularjs.org/api/ng/directive/ngChange. 19.09.2016
  • Ваш ответ был очень полезным! Но да, для переключения всего, что мне нужно, использовать ng-if вместо ng-model для истинного и ложного случая, иначе не сработало. 07.06.2018

    • 2

    Попробуй это:

    <form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>
    12.12.2014

    3

    Мне нравится использовать ng-repeat для ясности при отображении того, что вы выбираете / отменяете, в основном вы получаете красивый маленький объект, на котором все это основывается, и добавить к нему просто проще.

    Вот Plunker.

    * Также обратите внимание, как можно достичь allSelected? с функцией цикла, а не с тонной html, и я уверен, что это можно сделать с меньшим количеством спагетти, но это работает *

    app.controller('MainCtrl', function($scope) {

$scope.allSelected = false;

$scope.checkboxes = [{label: 'Option 1',checked: true}, {label: 'Option 2'}}}];

$scope.cbChecked = function(){
  $scope.allSelected = true;
  angular.forEach($scope.checkboxes, function(v, k) {
    if(!v.checked){
      $scope.allSelected = false;
    }
  });
}
$scope.toggleAll = function() {
    var bool = true;
    if ($scope.allSelected) {
      bool = false;
    }
    angular.forEach($scope.checkboxes, function(v, k) {
      v.checked = !bool;
      $scope.allSelected = !bool;
      });
   }
});
    12.12.2014
    Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...