Отключен выбранный элемент в Angular для других полей параметров выбора тех же элементов.

Я некоторое время боролся с этим... В настоящее время я использую Angular.

Допустим, у нас есть пять полей выбора опций, и мы повторяем один и тот же список для каждого из них.

Наши варианты:

$scope.items = [one, two, three, four, five];

Если я выберу один, как мне отключить выбранный параметр для остальных полей выбора? И если я перейду к другому полю выбора и выберу доступный элемент, он отключит этот элемент для всех других полей.

Любая помощь или даже руководство о том, как это сделать, будут оценены. Спасибо


angularjs angularjs-ng-repeat ng-options
person Justin    schedule 18.12.2014    source источник
comment
Итак, вы все еще хотите видеть их в полях параметров выбора, но не выбирать, когда они уже были приняты любыми другими полями параметров выбора?   -  person ryeballar    schedule 18.12.2014
comment
Вы ищете что-то подобное? удалить элемент или элемент с отключенным плункером   -  person ryeballar    schedule 18.12.2014
comment
Я бы отметил это как лучший ответ, но это комментарий.   -  person Justin    schedule 22.12.2014
comment
тогда я отвечу на него тогда :)   -  person ryeballar    schedule 22.12.2014

Ответы (3)


arrow_upward
7
arrow_downward

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

  1. Отключите, удалив элементы, которые уже выбраны из других элементов select. Для этого решения требуется фильтр, который удаляет уже выбранные элементы, за исключением текущего элемента, выбранного текущим тегом select.

ДЕМО

JavaScript

  .controller('Ctrl', function($scope) {

    $scope.items = [1,2,3,4,5];
    $scope.data = [];

  })

  .filter('arrayDiff', function() {
    return function(array, diff) {
      var i, item, 
          newArray = [],
          exception = Array.prototype.slice.call(arguments, 2);

      for(i = 0; i < array.length; i++) {
        item = array[i];
        if(diff.indexOf(item) < 0 || exception.indexOf(item) >= 0) {
          newArray.push(item);
        }
      }

      return newArray;

    };
  });

HTML

<select 
  ng-repeat="(modelIndex, itemValue) in items track by modelIndex"
  ng-model="data[modelIndex]"
  ng-options="item for item in $parent.items | arrayDiff:data:data[modelIndex]">
  <option value="">Select Number</option>
</select>
  1. Отключите, установив свойство disabled для опций. На самом деле это сложный способ решения проблемы, поскольку он не использует стандартный угловой синтаксис select ng-option. Используя ng-repeat для перебора элементов и добавления выражения ng-disabled, которое оценивает текущий выбранный элемент по сравнению с другими выбранными элементами из других элементов select.

ДЕМО

JavaScript

  .controller('Ctrl', function($scope) {

    this.items = ['1', '2', '3', '4', '5'];
    this.data = [];

  })

  .filter('hasIntersection', function() {
    return function(item, array) {
      return array.indexOf(item) >= 0;
    };
  });

HTML

<select
  ng-repeat="(selectIndex, itemValue) in Demo.items"
  ng-model="Demo.data[selectIndex]">

  <option value="" ng-selected="Demo.data[selectedIndex] == item">
    Select Number  
  </option>

  <option ng-repeat="item in Demo.items"
          value="{{item}}"
          ng-disabled="item | hasIntersection:Demo.data"
          ng-selected="Demo.data[selectIndex] == item">
    {{item}}
  </option>

</select>

person ryeballar    schedule 22.12.2014
comment
Ваш ответ отличный @ryeballar, как мы можем сделать это для множественного выбора с помощью Angularjs. - person Kannan K; 09.10.2017

arrow_upward
3
arrow_downward

ng-disabled здесь ваш друг, однако я думаю, что вы можете столкнуться с некоторыми проблемами с динамическим выбором в IE. http://plnkr.co/edit/Ca6l2sHjN2PRykidm9kx?p=preview

person Petr Averyanov    schedule 18.12.2014
comment
Вы помещаете информацию о представлении, отключенную информацию, в модель. Эта информация не приводится ниже в модели. - person Enzey; 18.12.2014
comment
Лучше бы ng-disabled="option == model[0]" - person Enzey; 18.12.2014
comment
Также обратите внимание, что неиспользование ng-options означает, что вы получите только текст между тегом ‹option›, а не объект. Хотя в настоящее время нет возможности отключить параметры при использовании ng-options. См.: stackoverflow.com/questions/16202254/ - person Enzey; 18.12.2014
comment
Enzey, 'option == model[0]' - это работает только для 2 выпадающих списков, вопрос был о 5. Я думаю, что модель для отключенных - это 100% нормально, поскольку она меняется динамически. Вы можете использовать ‹option› и выбрать объект — просто используйте ‹option value={{whatever_u_want}} - person Petr Averyanov; 18.12.2014

arrow_upward
1
arrow_downward

Вы можете использовать ng-disabled.

<select ng-options="item in items" ng-model="selectedItem" ng-disabled="selectedItem"></select>

Рабочий пример здесь: http://jsfiddle.net/astrojason/4njwhdua/

person Jason Sylvester    schedule 18.12.2014