Как обновить только выбранный элемент ng-repeat вместо всех

Question

Как обновить только выбранный элемент ng-repeat вместо всех

0

У меня возникла следующая проблема: я написал приложение, в котором можно многократно добавлять div, содержащий два блока выбора. Содержимое второго блока выбора зависит от выбора первого блока выбора. Однако, как только я выбираю определенный элемент из первого окна выбора, содержимое всех существующих вторых блоков выбора обновляется. То, что я хочу, - это только текущее второе окно выбора, которое нужно обновить.

Вот мой плункер

Всякий раз, когда у меня уже есть 1..n, выберите selectItem4 из первого окна выбора текущего div, все предыдущие ячейки выбора также обновляются и содержат только две опции выбора special1 и special2, которые определены только для specialItem4. Я просто хочу, чтобы текущее второе поле выбора было обновлено:

Фрагмент кода HTML:

<div ng-switch-default="ng-switch-default">
      <select ng-model="rule.parameter" ng-options="sel1.name for sel1 in selects1" ng-change="change(rule.parameter)"></select>
      <select ng-options="sel2 for sel2 in filteredselect2" ng-model="rule.relation"></select>
</div>

Вырезанный из JS-кода:

    scope.change = function (sel2Selection) {
        scope.filteredselect2 = [];
        for(var key in scope.selects2){
            if(angular.isDefined(scope.selects2[key][sel2Selection.relation])){
                scope.filteredselect2 = scope.selects2[key][sel2Selection.relation];
            }
        }
    };

Я был бы благодарен за помощь, так как я новичок в AngularJS.

YourReflection 01 дек. 2015, в 17:13

Источник

0

Похоже, в вашей директиве есть повторение, поэтому область действия, используемая в каждом из полей выбора, одинакова. Возможно, вы хотите иметь директиву для каждой пары блоков выбора, чтобы переменная scope.filteredselect2 содержала разные массивы для каждой пары.
mcgraphix 01 дек. 2015, в 16:09
0

Не могли бы вы привести пример?
YourReflection 01 дек. 2015, в 16:58

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

Похоже, в вашей директиве есть повторение, поэтому область действия, используемая в каждом из полей выбора, одинакова. Возможно, вы хотите иметь директиву для каждой пары блоков выбора, чтобы переменная scope.filteredselect2 содержала разные массивы для каждой пары.

mcgraphix · Accepted Answer · 2015-12-01T15-10-00.000Z

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

dynamicSelect.directive('dynamicSelectPair', function() {
  return {
    scope: {
      rule: '=',
      selects1: '=',
      selects2: '='
    },
    template: '<select ng-model="rule.parameter" ng-options="sel1.name for sel1 in selects1" ng-change="change(rule.parameter)"></select><select ng-options="sel2 for sel2 in filteredselect2" ng-model="rule.relation"></select>',
    link: function(scope) {
      // change the second select content depending on the select item of the first select
        scope.change = function(sel2Selection) {
          scope.filteredselect2 = [];

          for (var key in scope.selects2) { 
            if (angular.isDefined(scope.selects2[key][sel2Selection.relation])) {
              scope.filteredselect2 = scope.selects2[key][sel2Selection.relation];
            }
          }
        };
    }
  }  
});

Затем измените свой HTML-код, чтобы использовать новую директиву в ng-repeat. Обратите внимание, что возможные значения для выбранных могут быть переданы в директиву, поскольку вы уже имеете их во внешней области.

 <div ng-switch-default="ng-switch-default">
        <div dynamic-select-pair selects1='selects1' selects2='selects2' rule='rule'>
 </div>

Вот обновленный Plunkr: http://plnkr.co/edit/Sr1s6I3zleCGr95eYa9e?p=preview

Привет большое спасибо! Это то, что я искал. Еще один вопрос: возможно ли, чтобы выпадающие списки остались в моем html-файле? Проект намного больше с большим количеством html-элементов внутри формы, и я хотел бы хранить все в одном месте.
«Угловой способ» обычно состоит в том, чтобы поместить шаблон в его собственный файл, а затем сослаться на файл, используя свойство «templateUrl» объекта определения директивы вместо встраивания в свойство html «template». Я обновил поршень, чтобы показать это.
Спасибо еще раз @mcgraphix. Я имел в виду, что у меня есть другие html-элементы, которые изменены в другой директиве посредством вызовов функций, сделанных в новой директиве. Например, когда щелкают раскрывающиеся окна в директиве dynamicSelectPair, предполагается, что вызывается функция checkComplete (), которая реализована в директиве dynamicSelect и включает другую кнопку: <select ng-model="rule.parameter" ng-options="sel1.name for sel1 in selects1" ng-change="change(rule.parameter)" ng-click="checkComplete()"> .
checkComplete() реализован в директиве dynamicSelect . Я читал об использовании require и контроллеров для связи между директивами, но я думаю, что это невозможно в моем случае, потому что я использую compile в директиве dynamicSelect . Вот Plunker с примером (не работает).
Вы можете передать эту функцию как обработчик события: scope: {rule: '=', selects1: '=', selects2: '=', change: "&"}, а затем добавить change = "change" в свой HTML-тег
Итак, изменение относится к названию моей функции? Что значит & ? Я хочу, чтобы checkComplete() вызывался из события ng-click . Итак, все, что мне нужно сделать, это scope: { rule: '=', selects1: '=', selects2: '=' , checkComplete: '&'} и в моем html-теге добавление checkComplete='checkComplete' ? Есть ли причина, по которой вы написали & и изменение в двойных кавычках вместо одинарных?
«&» Означает, что то, что вы передаете, является функцией, которая будет доступна в области действия вашей директивы как scope.change (). Так что в вашем случае, если вы хотите назвать его checkComplete, это нормально, но когда вы добавляете html, это должно быть check-complete = "checkComplete ()". Я видел, как люди часами пытались понять, почему checkComplete = "checkComplete ()" не работает. Так что помните, что в определении вашей директивы вы используете регистр верблюда, но в качестве атрибута html вы должны использовать регистр змеи. Не повод для двойных кавычек. Я набирал это на своем телефоне :-)
Вот пример: plnkr.co/edit/eoDhh4RpdbrygwavdSfC?p=preview
Большое спасибо @mcgraphix! Работает :)