Хобрук: Ваш путь к мастерству в программировании

Получить новое значение, выбранное в ng-option при изменении множественного выбора

У меня есть на моей странице .html раскрывающийся список в виде множественного выбора:

 <select class="form-control"
         multiple
         ng-model="filter.types"
         ng-change="onChange()"
         ng-options="option for option in filterOptions.types">
    {{option}}
 </select>

В моем контроллере у меня есть функция onChange:

$scope.onChange= function(newOptionSelected){
    console.log(newOptionSelected);
}

Здесь я хочу, чтобы текущий элемент добавлялся к выбранным filter.types. Как я мог этого добиться?

Если бы это был одиночный выбор, я мог бы просто передать ng-модель функции onChange.

<select class="form-control"
     ng-model="filter.type"
     ng-change="onChange(filter.type)"
     ng-options="option for option in filterOptions.types">
{{option}}

But how to achieve this with a multiple select?

Любые идеи? :)

Я хочу удалить все выбранные элементы, если добавлена ​​опция «Все». И если выбрана опция "Все", то при выборе следующего пункта мне нужно убрать только опцию "Все".

введите здесь описание изображения


  • Что именно останавливает вас от выбора модели? Демо 26.03.2018
  • Могу, но хочу знать, какой элемент в данный момент добавлен в массив выбранных опций. Потому что, если выбран вариант «Все», я хочу очистить массив и оставить только все параметры. Я могу выполнить поиск indexOf('all) и удалить все элементы, если индекс › чем 0. Но тогда, если я выбрал все и хочу выбрать что-то другое, это не сработает. Если я знаю, что текущий добавленный элемент — это все, я могу удалить все. И если это что-то другое, я могу удалить опцию all. 26.03.2018
  • хорошо, это было бы отличным дополнением к вашему вопросу, я предлагаю вам отредактировать его с помощью этой информации 26.03.2018
  • К тому моменту, когда я решил это, используя вспомогательный массив и проверив, был ли индекс всех уже в выбранных параметрах. Но не так красиво, я надеюсь найти более приятный вариант. 26.03.2018

Ответы:


1

Вы не можете добиться этого с помощью ng-change, потому что вам нужно отслеживать, какой вариант был выбран последним. Вы должны $watch свой filter.types, который представляет собой массив, а затем на основе нового значения и старого значения вы можете решить, что делать.

$scope.$watch('filter.types', function(newVal, oldVal) {
      if (newVal.length > oldVal.length) { //Updating only on selecting 
        var lastSelectedOption = [];
        lastSelectedOption = $scope.diff(newVal, oldVal);
        if (lastSelectedOption[0] == 'All') { 

          var i = newVal.length;
          while (i--) {
            if (newVal[i] != 'All') {
              newVal.splice(i, 1); //Deleting other options
            }
          }
        } else if (newVal.indexOf('All') > -1) { 
          newVal.splice(newVal.indexOf('All'), 1); //Deleting 'All' option
        }
      }

    });

Рабочая ссылка JSFiddle для справки. Удачи!

26.03.2018
  • Спасибо! Это было действительно полезно. Использование наблюдателя делает свое дело. 27.03.2018

  • 2

    Вы можете проверить документацию angular, чтобы получить ответ на этот вопрос. https://docs.angularjs.org/api/ng/directive/select

    Plunker:- https://plnkr.co/edit/rhX9AiAhPfHXB2c2BUZF?p=preview
    
    26.03.2018
    Новые материалы

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

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

    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..