selectng选项更改时获取值

我在我的.html页面中有一个下拉列表,

落下:

<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> <option value="">Select Account</option> </select> 

我想在用户select一个值时执行一个动作。 所以在我的控制器中,我做了:

控制器:

 $scope.$watch('blisterPackTemplateSelected', function() { alert('changed'); console.log($scope.blisterPackTemplateSelected); }); 

但是,更改下拉列表中的值不会触发代码: $scope.$watch('blisterPackTemplateSelected', function()

因此,我在select标签上尝试了另一个方法: ng_change = 'changedValue()'

function:

 $scope.changedValue = function() { console.log($scope.blisterPackTemplateSelected); } 

但是blisterPackTemplateSelected存储在一个子范围中。 我读了父母不能访问子范围。

当下拉列表中的选定值更改时,执行某些操作的正确/最佳方式是什么? 如果是方法1,我在做什么错我的代码?

因为Artyom说你需要使用ngChange并将ngModel对象作为parameter passing给你的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和名字都传递给我的模型,但所有正统的解决scheme都让我在控制器上编写代码来处理这个变化。

我用一个filter把我的方式从我的身上挤出来。

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

我正在使用内置filter来检索id的正确名称

这是一个有工作演示的plunkr 。

请使用ngChange指令。 例如:

 <select ng-model="blisterPackTemplateSelected" ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" ng-change="changeValue(blisterPackTemplateSelected)"/> 

并将您的新模型值作为parameter passing给控制器​​:

 ng-change="changeValue(blisterPackTemplateSelected)" 

最佳做法是创build一个对象(在ng模型中总是使用.in)

在你的控制器中:

 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.iovideo“The Dot”有一个非常好的概述,就像这个非常受欢迎的堆栈溢出问题: AngularJS中范围原型/原型inheritance的细微差别是什么?

您可以通过ng-change函数将ng模型值作为parameter passing:

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

知道你的情况有点困难,但没有看到它,但这应该工作。

你可以做这样的事情

 <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。我已经使用Add选项来进行testing

我在这里迟到了,但是我用这种简单容易的方式解决了同样的问题。

 <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的function如下:

  $scope.selectedBlisterPack= function (value) { console.log($scope.blisterPackTemplateSelected); }; 

您将通过使用filter从列表/数组中获得所选选项的值和文本。
editobj.FlagName =(的employeeStatus |filter:{值: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> 

我有同样的问题,并find一个独特的解决scheme。 这不是最好的做法,但可能certificate对某人来说简单/有帮助。 只需在id或class或者你的select标签上使用jquery,然后你就可以访问change函数中的文本和值。 在我的情况下,我通过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(); }; 

我尝试了一些解决scheme,但这里是基本的生产片段。 在这段代码的质量保证期间,请注意控制台的输出。

标记:

 <!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.name}}{{delimiter}}{{selBrand.price}}{{currency}} </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 }); 

说明:这里重要的一点是对已更改的值进行空值检查,即如果值为'undefined'或'null',我们应该处理这种情况。