如何在 Angular 中获取 select 的更改值 - 不更新全局模型?
How to get changed value of a select in Angular - Without updating a global model?
我有几个小部件是从 JSON 数据和一个 ng-repeat
生成的。此小部件内有一个 select 下拉菜单。
我可以在我的 Controller
中使用 ng-change
调用一个函数,但是在 select 上使用 ng-model
, 改变了选择所有小部件.
中所有select个下拉菜单的值
我该如何防止这种情况发生?
<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>
select上的模型:ng-model="widget.chosenValue"
^ 因此,在 select 中选择一个选项会将正确的值发送到我的 widget.updateTag
函数中,但是它也会更改所有其他小部件中的值。
有没有办法将模型范围隔离到每个小部件?
如果您想知道他们选择了什么,您应该更换
ng-model="widget.chosenValue"
ng-change="widget.updateTag(item.item_id, widget.chosenValue)
和
ng-model="item.chosenValue"
ng-change="widget.updateTag(item)
这会将 chosenValue 应用于列表中的每个项目,因此它看起来像
<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
将其放入控制器中:
$scope.widget.chosenValue = {};
重复元素中的这个:
<select ng-model="widget.chosenValue[{{/*$id or $index*/}}]"
使用 $id 和 $index 各有利弊;使用 $id 通常更安全,但会使跟踪信息稍微更烦人。
或者,您可以从 ng-model 表达式中删除任何句点,这会导致它将 属性 绑定到最近的范围,而不是搜索具有适当对象的范围。我不建议这样做,因为它会使模型在使用控制器访问时很烦人。
试试这个
<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>
我有几个小部件是从 JSON 数据和一个 ng-repeat
生成的。此小部件内有一个 select 下拉菜单。
我可以在我的 Controller
中使用 ng-change
调用一个函数,但是在 select 上使用 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>
select上的模型:ng-model="widget.chosenValue"
^ 因此,在 select 中选择一个选项会将正确的值发送到我的 widget.updateTag
函数中,但是它也会更改所有其他小部件中的值。
有没有办法将模型范围隔离到每个小部件?
如果您想知道他们选择了什么,您应该更换
ng-model="widget.chosenValue"
ng-change="widget.updateTag(item.item_id, widget.chosenValue)
和
ng-model="item.chosenValue"
ng-change="widget.updateTag(item)
这会将 chosenValue 应用于列表中的每个项目,因此它看起来像
<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
将其放入控制器中:
$scope.widget.chosenValue = {};
重复元素中的这个:
<select ng-model="widget.chosenValue[{{/*$id or $index*/}}]"
使用 $id 和 $index 各有利弊;使用 $id 通常更安全,但会使跟踪信息稍微更烦人。
或者,您可以从 ng-model 表达式中删除任何句点,这会导致它将 属性 绑定到最近的范围,而不是搜索具有适当对象的范围。我不建议这样做,因为它会使模型在使用控制器访问时很烦人。
试试这个
<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>