Как получить измененное значение выбора в Angular — без обновления глобальной модели?

У меня есть несколько виджетов, которые генерируются из данных JSON и файла ng-repeat. Внутри этого виджета есть раскрывающийся список выбора.

Я могу вызвать функцию в своем Controller с помощью ng-change, однако использование ng-model для этого выбора меняет выбранное значение для всех раскрывающихся списков выбора во всех виджетах.

Как мне предотвратить это?

<div ng-repeat="item in widget.items" class="well col-md-6 col-lg-4">
    <select ng-model="widget.chosenValue"
            ng-change="widget.updateTag(item.item_id, widget.chosenValue)">

        <option value="companies"
                ng-selected="{{item.tag == 'companies'}}"
                changed="companies">companies</option>

        <option value="news"
                ng-selected="{{item.tag == 'news'}}"
                changed="news">news</option>

        <option value="people"
                ng-selected="{{item.tag == 'people'}}"
                changed="people">people</option>

        <option value="products"
                ng-selected="{{item.tag == 'products'}}"
                changed="products">products</option>
    </select>
</div>

Модель на выбор: ng-model="widget.chosenValue"

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

Есть ли способ изолировать область действия модели для каждого виджета?


angularjs angularjs-ng-repeat angular-ngmodel angularjs-ng-model ng-repeat
person Leon Gaban    schedule 18.03.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Если вы хотите знать, что они выбрали, вы должны заменить

ng-model="widget.chosenValue"
ng-change="widget.updateTag(item.item_id, widget.chosenValue)

с

ng-model="item.chosenValue"
ng-change="widget.updateTag(item)

Это применяет selectedValue к каждому элементу в списке, поэтому это будет выглядеть так:

<div ng-repeat="item in widget.items" class="well col-md-6 col-lg-4">
    <select ng-model="item.chosenValue"
            ng-change="widget.updateTag(item)">

Затем в вашей функции updateTag вы можете получить доступ

  • item.item_id
  • элемент.тег
  • item.chosenValue
person Martin    schedule 18.03.2015
comment
Да, я могу получить правильное значение, проблема в том, что каждый другой виджет, который находится в ng-repeat, также показывает измененное значение. Как бы вы это предотвратили? - person Leon Gaban; 18.03.2015
comment
Если вы посмотрите, я использую ng-model=item.chosenValue вместо ng-model=widget.chosenValue, поэтому он будет хранить только selectedValue для этого элемента. - person Martin; 18.03.2015
comment
Спасибо вижу! :D Теперь работает намного лучше - person Leon Gaban; 18.03.2015

arrow_upward
1
arrow_downward

Поместите это в контроллер:

$scope.widget.chosenValue = {};

и это в повторяющемся элементе:

<select ng-model="widget.chosenValue[{{/*$id or $index*/}}]"

Есть плюсы и минусы использования $id и $index; использование $id, как правило, безопаснее, но делает отслеживание информации немного более раздражающим.

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

person Tahsis Claus    schedule 18.03.2015
comment
Спасибо, надо будет как-нибудь тоже попробовать этот способ - person Leon Gaban; 18.03.2015
comment
@LeonGaban Я понял, что вы определенно захотите использовать $index, так как у вас есть вызовы функций в других элементах html, которые будут иметь другой $id. - person Tahsis Claus; 18.03.2015

arrow_upward
0
arrow_downward

Попробуй это

<md-select ng-model="selectedOption"  
ng-change="performAction(selectedOption.chosenValue, selectedOption.tag, selectedOption.item_id)" >
<md-option 
ng-value="item" 
ng-repeat="item in widget.items">{{ item.tag }}</md-option>
</md-select>
person Egglabs    schedule 04.10.2016