如何在Angular中获取选择的更改值-不更新全局模型？

Question

我有几个从 JSON 数据和ng-repeat 生成的小部件。此小部件内部是一个选择下拉菜单。

我可以使用ng-change 在我的Controller 中调用一个函数，但是在该选择上使用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"

^ 因此，在 select 中选择一个选项会将正确的值发送到我的 widget.updateTag 函数中，但它也会更改每个其他小部件中的值。

有没有办法将模型范围隔离到每个小部件？

Answer 1

如果你想知道他们选择了什么，你应该替换

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.tag
• item.chosenValue

Answer 2

把这个放到控制器里：

$scope.widget.chosenValue = {};

而这个在重复元素中：

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

使用 $id 与 $index 各有利弊；使用 $id 通常更安全，但跟踪信息会稍微烦人。

或者，您可以从 ng-model 表达式中删除任何句点，这将导致它将该属性绑定到最近的范围，而不是使用适当的对象搜索一个。我不建议这样做，因为它会使模型通过控制器访问很烦人。

Answer 3

试试这个

<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>