在选定的 ng-option 更改时获取值 [英] Get value when selected ng-option changes
问题描述
我的 .html 页面中有一个下拉列表,
下拉菜单:
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate 作为泡罩包装模板.在泡罩包装模板中的泡罩包装模板的名称"><option value="">选择账户</option></选择>
我想在用户选择一个值时执行一个操作.所以在我的控制器中我做了:
控制器:
$scope.$watch('blisterPackTemplateSelected', function() {警报('改变');console.log($scope.blisterPackTemplateSelected);});
但是更改下拉列表中的值不会触发代码:$scope.$watch('blisterPackTemplateSelected', function()
结果我尝试了另一种方法:ng_change = 'changedValue()'
on the select tag
和
功能:
$scope.changedValue = function() {console.log($scope.blisterPackTemplateSelected);}
但是 blisterPackTemplateSelected
存储在子作用域中.我读到父级无法访问子级作用域.
当下拉列表中的选定值发生变化时,执行某些操作的正确/最佳方法是什么?如果是方法 1,我的代码有什么问题?
正如 Artyom 所说,你需要使用 ngChange 并将 ngModel 对象作为参数传递给 ngChange 函数
示例:
<div ng-app="App" ><div ng-controller="ctrl"><选择 ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)"data-ng-options="blisterPackTemplate 作为泡罩包装模板.泡罩包装模板中的泡罩包装模板的名称"><option value="">选择账户</option></选择>{{itemList}}
js:
function ctrl($scope) {$scope.itemList = [];$scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];$scope.changedValue = 函数(项目){$scope.itemList.push(item.name);}}
实例:http://jsfiddle.net/choroshin/9w5XT/4/
I have in my .html page a dropdown list,
Dropdown:
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
I want to execute an action when the user select a value. So In my controller I did:
Controller:
$scope.$watch('blisterPackTemplateSelected', function() {
alert('changed');
console.log($scope.blisterPackTemplateSelected);
});
But the changing the value in the dropdownlist doesn't trigger the code : $scope.$watch('blisterPackTemplateSelected', function()
As a result I tried another method with a : ng_change = 'changedValue()'
on the select tag
and
Function:
$scope.changedValue = function() {
console.log($scope.blisterPackTemplateSelected);
}
But the blisterPackTemplateSelected
is stored into a child scope. I read that the parent can't get access to the child scope.
What is the correct/best way to execute something when a selected value in a dropdown list changes? If it's method 1, what am I doing wrong with my code?
as Artyom said you need to use ngChange and pass ngModel object as argument to your ngChange function
Example:
<div ng-app="App" >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
{{itemList}}
</div>
</div>
js:
function ctrl($scope) {
$scope.itemList = [];
$scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];
$scope.changedValue = function(item) {
$scope.itemList.push(item.name);
}
}
Live example: http://jsfiddle.net/choroshin/9w5XT/4/
这篇关于在选定的 ng-option 更改时获取值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!