当选择 n- 选项更改时获取值

我在 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()

因此，我尝试了另一种方法，在 select 标记上使用: ng_change = 'changedValue()'

还有

功能:

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

但是 blisterPackTemplateSelected存储在子范围中。我读到父级无法访问子作用域。

当下拉列表中的选定值发生变化时，执行某些操作的正确/最佳方式是什么？如果是方法1，那么我的代码出了什么问题？

363768 次浏览
小开

请用 ngChange指令。 For example:

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

并在控制器中将新模型值作为参数传递:

ng-change="changeValue(blisterPackTemplateSelected)"
小开

您可以通过 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>

如果没有看到它，就很难知道你的情况，但是这应该是可行的。

小开
最佳答案

as Artyom said you need to use 改变 and pass ngModel object as argument to your ngChange function

例子 :

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

约翰逊:

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 和名称都传递到模型中，但是所有传统的解决方案都要求我在控制器上编写代码来处理更改。

我用过滤器把它弄出来了。

<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 的正确名称

这是一个带有工作演示的 噗通。

小开

你可以这么做

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

小开

最佳实践是创建一个对象(始终使用 ng- 模型中的.)

在你的控制器中:

var myObj: {
ngModelValue: null
};

在你的模板中:

<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options">
</select>

现在你可以看着了

myObj.ngModelValue

or you can use the ng-change directive like so:

<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options"
ng-change="myChangeCallback()">
</select>

Io 视频 “点”有一个非常好的概述，这个非常流行的堆栈溢出问题 AngularJS 中范围原型/原型继承的细微差别是什么？也是如此

小开

我遇到了同样的问题，并找到了一个独特的解决方案。这不是最佳实践，但它可能被证明是简单的/对某人有帮助的。只要在 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>

然后在角度控制器中，我的 n- 变化函数是这样的:

    $scope.projectChange = function($scope) {
$scope.project.title=$("#projectSelector option:selected").text();
};
小开

我在这里迟到了，但是我用这种简单易行的方法解决了同样的问题。

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

N- 变化函数如下;

 $scope.selectedBlisterPack= function (value) {


console.log($scope.blisterPackTemplateSelected);


};
小开

You will get selected option's value and text from list/array by using filter.
Edit obj.FlagName = (EmployeeStatus | filter: { Value: edit obj.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>
小开

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

标价:

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


});

说明: 这里的重点是对更改后的值进行 null 检查，也就是说，如果值是“未定义”或“ null”，我们应该处理这种情况。


提交答案