选择 ng-option 更改时获取值
Posted
技术标签:
【中文标题】选择 ng-option 更改时获取值【英文标题】：Get value when selected ng-option changes 【发布时间】：2014-03-27 19:34:49 【问题描述】：我的 .html 页面中有一个下拉列表，
下拉菜单：
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
我想在用户选择一个值时执行一个动作。所以在我的控制器中我做了：
控制器：
$scope.$watch('blisterPackTemplateSelected', function()
alert('changed');
console.log($scope.blisterPackTemplateSelected);
);
但更改下拉列表中的值不会触发代码：$scope.$watch('blisterPackTemplateSelected', function()
结果我尝试了另一种方法，在选择标签上使用：ng_change = 'changedValue()'
和
功能：
$scope.changedValue = function()
console.log($scope.blisterPackTemplateSelected);
但blisterPackTemplateSelected 存储在子作用域中。我读到父母无法访问子范围。
当下拉列表中的选定值发生更改时，执行某些操作的正确/最佳方法是什么？如果是方法1，我的代码做错了什么？
【问题讨论】：
【参考方案1】：请使用ngChange 指令。
例如：
<select ng-model="blisterPackTemplateSelected"
ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
ng-change="changeValue(blisterPackTemplateSelected)"/>
并在控制器中将您的新模型值作为参数传递：
ng-change="changeValue(blisterPackTemplateSelected)"
【讨论】：
【参考方案2】：可以通过ng-change函数将ng-model的值作为参数传递：
<select
ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
ng-change="changedValue(blisterPackTemplateSelected)">
<option value="">Select Account</option>
</select>
不看就知道你的场景有点困难，但这应该可行。
【讨论】：
【参考方案3】：正如 Artyom 所说，您需要使用 ngChange 并将 ngModel 对象作为参数传递给您的 ngChange 函数
示例：
<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);
现场示例：http://jsfiddle.net/choroshin/9w5XT/4/
【讨论】：
嗨，很好的答案。这里选项的值设置为项目的整行详细信息。如何将其设置为 id？ 嗨@Alex Choroshin 我有同样类型的问题，但是当我从数据库中收集数据时，我正在从数据库中获取数据，如何在 div 中显示该数据？我在控制器的功能 $scope.accountdetaildata = data.data;在视图 div 中我尝试使用此代码 accountdetaildata .balance 但数据未显示为从数据库接收的数据，我可以在控制台中看到该数据【参考方案4】：我可能会迟到，但我有有点同样的问题。
我需要将 id 和 name 都传递到我的模型中，但所有正统的解决方案都让我在控制器上编写代码来处理更改。
我使用过滤器摆脱了它。
<select
ng-model="selected_id"
ng-options="o.id as o.name for o in options"
ng-change="selected_name=(options|filter:id:selected_id)[0].name">
</select>
<script>
angular.module("app",[])
.controller("ctrl",['$scope',function($scope)
$scope.options = [
id:1, name:'Starbuck',
id:2, name:'Appolo',
id:3, name:'Saul Tigh',
id:4, name:'Adama'
]
])
</script>
“诀窍”在这里：
ng-change="selected_name=(options|filter:id:selected_id)[0].name"
我正在使用内置过滤器来检索 id 的正确名称
这里有一个plunkr 和一个工作演示。
【讨论】：
【参考方案5】：你可以这样做
<html ng-app="App" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module("App",[])
.controller("ctrl",['$scope',function($scope)
$scope.changedValue = function(item)
alert(item);
]);
</script>
<div >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" >
<option value="">Select Account</option>
<option value="Add">Add</option>
</select>
</div>
</div>
</html>
您应该使用 data-ng-options 而不是添加选项。我已使用添加选项进行测试
【讨论】：
【参考方案6】：最佳实践是创建一个对象（在 ng-model 中始终使用 .）
在您的控制器中：
var myObj:
ngModelValue: null
;
在你的模板中：
<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options">
</select>
现在你可以观看了
myObj.ngModelValue
或者你可以像这样使用 ng-change 指令：
<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options"
ng-change="myChangeCallback()">
</select>
egghead.io 视频 "The Dot" 有一个非常好的概述，这个非常流行的堆栈溢出问题也是如此：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
【讨论】：
【参考方案7】：我遇到了同样的问题并找到了一个独特的解决方案。这不是最佳实践，但对某人来说可能很简单/有帮助。只需在 id 或 class 或您的 select 标记上使用 jquery，然后您就可以访问更改函数中的文本和值。就我而言，我通过sails/ejs 传递选项值：
<select id="projectSelector" class="form-control" ng-model="ticket.project.id" ng-change="projectChange(ticket)">
<% _.each(projects, function(project) %>
<option value="<%= project.id %>"><%= project.title %></option>
<% ) %>
</select>
然后在我的 Angular 控制器中，我的 ng-change 函数如下所示：
$scope.projectChange = function($scope)
$scope.project.title=$("#projectSelector option:selected").text();
;
【讨论】：
【参考方案8】：我来晚了，但我用这种简单易行的方式解决了同类问题。
<select ng-model="blisterPackTemplateSelected" ng-change="selectedBlisterPack(blisterPackTemplateSelected)">
<option value="">Select Account</option>
<option ng-repeat="blisterPacks in blisterPackTemplates" value="blisterPacks.id">blisterPacks.name</option>
ng-change的函数如下；
$scope.selectedBlisterPack= function (value)
console.log($scope.blisterPackTemplateSelected);
;
【讨论】：
【参考方案9】：您将使用过滤器从列表/数组中获取选定选项的值和文本。 editobj.FlagName=(EmployeeStatus|filter:Value:editobj.Flag)[0].KeyName
<select name="statusSelect"
id="statusSelect"
class="form-control"
ng-model="editobj.Flag"
ng-options="option.Value as option.KeyName for option in EmployeeStatus"
ng-change="editobj.FlagName=(EmployeeStatus|filter:Value:editobj.Flag)[0].KeyName">
</select>
【讨论】：
【参考方案10】：我尝试了一些解决方案，但这里是基本的生产 sn-p。请注意此 sn-p 质量保证期间的控制台输出。
标记：
<!DOCTYPE html>
<html ng-app="appUp">
<head>
<title>
Angular Select snippet
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>
<body ng-controller="upController">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-3">
<div class="form-group">
<select name="slct" id="slct" class="form-control" ng-model="selBrand" ng-change="Changer(selBrand)" ng-options="brand as brand.name for brand in stock">
<option value="">
Select Brand
</option>
</select>
</div>
<div class="form-group">
<input type="hidden" name="delimiter" value=":" ng-model="delimiter" />
<input type="hidden" name="currency" value="$" ng-model="currency" />
<span>
selBrand.namedelimiterselBrand.pricecurrency
</span>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
代码：
var c = console;
var d = document;
var app = angular.module('appUp',[]).controller('upController',function($scope)
$scope.stock = [
name:"Adidas",
price:420
,
name:"Nike",
price:327
,
name:"Clark",
price:725
];//data
$scope.Changer = function()
if($scope.selBrand)
c.log("brand:"+$scope.selBrand.name+",price:"+$scope.selBrand.price);
$scope.currency = "$";
$scope.delimiter = ":";
else
$scope.currency = "";
$scope.delimiter = "";
c.clear();
; // onchange handler
);
说明： 这里的重点是更改值的空检查，即如果值是“未定义”或“空”，我们应该处理这种情况。
【讨论】：
以上是关于选择 ng-option 更改时获取值的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-options 更改 <option value> [重复]
AngularJS ng-options 选择选项后选择默认值导致：“TypeError：无法读取属性'[property]' of null”