blocks|key|163394|text|请为它使用ngChange指令。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|163395|<select+ng-model="blisterPackTemplateSelected"+
++++++++ng-options="blisterPackTemplate+as+blisterPackTemplate.name+for+blisterPackTemplate+in+blisterPackTemplates"+
++++++++ng-change="changeValue(blisterPackTemplateSelected)"/>|code-block|syntax|javascript|163396|并将新的模型值作为参数传递到控制器中：|163397|ng-change="changeValue(blisterPackTemplateSelected)"|163398|entityMap^0|5|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Please, use for it <code>ngChange</code> directive.
For example:</p>

<pre><code>&lt;select ng-model="blisterPackTemplateSelected" 
        ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
        ng-change="changeValue(blisterPackTemplateSelected)"/&gt;
</code></pre>

<p>And pass your new model value in controller as a parameter:</p>

<pre><code>ng-change="changeValue(blisterPackTemplateSelected)"
</code></pre>


blocks|key|160781|text|您可以通过ng-change函数将ng-model值作为参数传递：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|160782|<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>|code-block|syntax|javascript|160783|在没有看到的情况下知道你的场景有点困难，但这应该是可行的。|160784|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can pass the ng-model value through the ng-change function as a parameter:</p>

<pre><code>&lt;select 
  ng-model="blisterPackTemplateSelected" 
  data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
  ng-change="changedValue(blisterPackTemplateSelected)"&gt;
    &lt;option value=""&gt;Select Account&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>It's a bit difficult to know your scenario without seeing it, but this should work.</p>


blocks|key|2965916|text|正如Artyom所说，您需要使用ngChange并将ngModel对象作为参数传递给ngChange函数|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2965917|示例|style|BOLD|2965918|<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>|code-block|syntax|javascript|2965919|js：|2965920|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);
++}+++++++
}|2965921|现场示例：http://jsfiddle.net/choroshin/9w5XT/4/|2965922|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng/directive/ngChange|1|http://jsfiddle.net/choroshin/9w5XT/4/^0|G|8|0|0|0|2|0|0|0|0|5|12|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

<p>as Artyom said you need to use <a href="http://docs.angularjs.org/api/ng/directive/ngChange">ngChange</a> and pass  ngModel object as argument to your ngChange function</p>

<p><strong>Example</strong>:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div ng-app="App" &gt;
  &lt;div ng-controller="ctrl"&gt;
    &lt;select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" 
            data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"&gt;
      &lt;option value=""&gt;Select Account&lt;/option&gt;
    &lt;/select&gt;
    {{itemList}}     
  &lt;/div&gt;       
&lt;/div&gt;
</code></pre>

<p>js:</p>

<pre class="lang-js prettyprint-override"><code>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);
  }       
}
</code></pre>

<p>Live example: <a href="http://jsfiddle.net/choroshin/9w5XT/4/">http://jsfiddle.net/choroshin/9w5XT/4/</a></p>


blocks|key|2965928|text|我可能会迟到，但我也有同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2965929|我需要将id和name都传递到我的模型中，但是所有正统的解决方案都让我在控制器上编写代码来处理更改。|2965930|我用过滤器把它弄出来了。|2965931|<select+
++++++++ng-model="selected_id"+
++++++++ng-options="o.id+as+o.name+for+o+in+options"+
++++++++ng-change="selected_name=(options%7Cfilter:{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>|code-block|syntax|javascript|2965932|“诀窍”在这里：|2965933|ng-change="selected_name=(options%7Cfilter:{id:selected_id})[0].name"|2965934|我使用内置的过滤器来检索id的正确名称。|2965935|这是一个带工作演示的plunkr。|offset|length|2965936|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/wwSyWvllwz1RcvIwTIIs?p=preview^0|0|0|0|0|0|0|0|A|6|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>I may be late for this but I had <em>somewhat</em> the same problem.</p>

<p>I needed to pass both the id and the name into my model but all the orthodox solutions had me make code on the controller to handle the change. </p>

<p>I macgyvered my way out of it using a filter.</p>

<pre class="lang-html prettyprint-override"><code>&lt;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"&gt;
&lt;/select&gt;
&lt;script&gt;
  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'}
    ]
  }])
&lt;/script&gt;
</code></pre>

<p>The "trick" is here:</p>

<pre><code>ng-change="selected_name=(options|filter:{id:selected_id})[0].name"
</code></pre>

<p>I'm using the built-in filter to retrieve the correct name for the id</p>

<p>Here's a <a href="http://plnkr.co/edit/wwSyWvllwz1RcvIwTIIs?p=preview">plunkr</a> with a working demo.</p>


blocks|key|2965942|text|你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2965943|<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>|code-block|syntax|javascript|2965944|您应该使用data-ng-+option而不是add选项。|2965945|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can do something like this</p>

<pre><code>&lt;html ng-app="App" &gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
angular.module("App",[])
  .controller("ctrl",['$scope',function($scope){

    $scope.changedValue = function(item){       
    alert(item);
  }
  }]);
&lt;/script&gt;
&lt;div &gt;
&lt;div ng-controller="ctrl"&gt;
    &lt;select  ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" &gt;
    &lt;option value=""&gt;Select Account&lt;/option&gt;
    &lt;option value="Add"&gt;Add&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/html&gt;
</code></pre>

<p>instead of add option you should use data-ng-options.I have used Add option for testing purpose</p>


blocks|key|2753551|text|最佳实践是创建一个对象(总是使用.在ng-model中)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2753552|在您的控制器中：|2753553|var+myObj:+{
+++++ngModelValue:+null
};|code-block|syntax|javascript|2753554|在您的模板中：|2753555|<select+
++++ng-model="myObj.ngModelValue"+
++++ng-options="o.id+as+o.name+for+o+in+options">
</select>|2753556|现在你可以看了|2753557|myObj.ngModelValue|2753558|或者，您可以像这样使用ng-change指令：|2753559|<select+
++++ng-model="myObj.ngModelValue"+
++++ng-options="o.id+as+o.name+for+o+in+options"
++++ng-change="myChangeCallback()">
</select>|2753560|egghead.io视频"The+Dot"有一个非常好的概述，还有一个非常流行的堆栈溢出问题：What+are+the+nuances+of+scope+prototypal+/+prototypical+inheritance+in+AngularJS?|offset|length|2753561|entityMap|0|LINK|mutability|MUTABLE|url|https://egghead.io/lessons/angularjs-the-dot|1|https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482^0|0|0|0|0|0|0|0|0|0|C|9|0|1B|29|1|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1H|8|@]|9|@$W|1I|X|1J|1|1K]|$W|1L|X|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

<p>Best practise is to create an object (always use a . in ng-model)</p>

<p>In your controller:</p>

<pre><code>var myObj: {
     ngModelValue: null
};
</code></pre>

<p>and in your template:</p>

<pre><code>&lt;select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options"&gt;
&lt;/select&gt;
</code></pre>

<p>Now you can just watch</p>

<pre><code>myObj.ngModelValue
</code></pre>

<p>or you can use the ng-change directive like so:</p>

<pre><code>&lt;select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options"
    ng-change="myChangeCallback()"&gt;
&lt;/select&gt;
</code></pre>

<p>The egghead.io video <a href="https://egghead.io/lessons/angularjs-the-dot" rel="nofollow noreferrer">"The Dot"</a> has a really good overview, as does this very popular stack overflow question: <a href="https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482">What are the nuances of scope prototypal / prototypical inheritance in AngularJS?</a></p>


blocks|key|2753573|text|我也遇到了同样的问题，并找到了一个独特的解决方案。这不是最佳实践，但它可能对某些人很简单/有帮助。只需在id、class或select标记上使用jquery，就可以访问change函数中的文本和值。在我的例子中，我通过sails/ejs传递选项值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2753574|++++<select+id="projectSelector"+class="form-control"+ng-model="ticket.project.id"+ng-change="projectChange(ticket)">
++++++<%25+_.each(projects,+function(project)+{+%25>
++++++++<option+value="<%25=+project.id+%25>"><%25=+project.title+%25></option>
++++++++<%25+})+%25>
++++</select>|code-block|syntax|javascript|2753575|然后在我的角度控制器中，我的ng-change函数如下所示：|2753576|++++$scope.projectChange+=+function($scope)+{
+++++++++$scope.project.title=$("#projectSelector+option:selected").text();
+++++};|2753577|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I had the same issue and found a unique solution. This is not best practice, but it may prove simple/helpful for someone. Just use jquery on the id or class or your select tag and you then have access to both the text and the value in the change function. In my case I'm passing in option values via sails/ejs:</p>

<pre><code>    &lt;select id="projectSelector" class="form-control" ng-model="ticket.project.id" ng-change="projectChange(ticket)"&gt;
      &lt;% _.each(projects, function(project) { %&gt;
        &lt;option value="&lt;%= project.id %&gt;"&gt;&lt;%= project.title %&gt;&lt;/option&gt;
        &lt;% }) %&gt;
    &lt;/select&gt;
</code></pre>

<p>Then in my Angular controller my ng-change function looks like this:</p>

<pre><code>    $scope.projectChange = function($scope) {
         $scope.project.title=$("#projectSelector option:selected").text();
     };
</code></pre>


blocks|key|159817|text|我来晚了，但我用这种方法解决了同样的问题，这很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|159818|<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>|code-block|syntax|javascript|159819|​|159820|ng-change函数如下；|159821|+$scope.selectedBlisterPack=+function+(value)+{++

++++++++console.log($scope.blisterPackTemplateSelected);

++++};|159822|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I am late here but I resolved same kind of problem in this way that is simple and easy.</p>

<pre><code>&lt;select ng-model="blisterPackTemplateSelected" ng-change="selectedBlisterPack(blisterPackTemplateSelected)"&gt;
&lt;option value=""&gt;Select Account&lt;/option&gt;
&lt;option ng-repeat="blisterPacks in blisterPackTemplates" value="{{blisterPacks.id}}"&gt;{{blisterPacks.name}}&lt;/option&gt;
</code></pre>

<p></p>

<p>and the function for ng-change is as follows;</p>

<pre><code> $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };
</code></pre>


blocks|key|163468|text|您将使用filter从列表/数组中获取所选选项的值和文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163469|editobj.FlagName=(EmployeeStatus%7Cfilter:{Value:editobj.Flag}).KeyName|offset|length|style|BOLD|163470|<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%7Cfilter:{Value:editobj.Flag})[0].KeyName">
</select>|code-block|syntax|javascript|163471|entityMap^0|0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You will get selected option's value and text from list/array by using filter.
<br> <strong>editobj.FlagName=(EmployeeStatus|filter:{Value:editobj.Flag})[0].KeyName</strong></p>

<pre><code>&lt;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"&gt;
&lt;/select&gt;
</code></pre>


blocks|key|159828|text|我已经尝试了一些解决方案，但这里是基本的生产代码片段。在此片段的质量保证过程中，请注意控制台输出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|159829|标记：|159830|<!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>|code-block|syntax|javascript|159831|代码：|159832|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:"%2B$scope.selBrand.name%2B",price:"%2B$scope.selBrand.price);
+++++$scope.currency+=+"$";
+++++$scope.delimiter+=+":";
+++++}
+++++else{

++++++++$scope.currency+=+"";
++++++++$scope.delimiter+=+"";
++++++++c.clear();
+++++}
++++};+//+onchange+handler

+});|159833|说明:这里重要的一点是对更改的值进行null检查，即如果值是“未定义”或“null”，我们应该处理这种情况。|159834|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I have tried some solutions,but here is basic production snippet. Please, pay attention to console output during quality assurance of this snippet.</p>

<p>Mark Up :</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="appUp"&gt;
&lt;head&gt;
&lt;title&gt;
  Angular Select snippet
&lt;/title&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /&gt;

&lt;/head&gt;


&lt;body ng-controller="upController"&gt;

&lt;div  class="container"&gt;

 &lt;div class="row"&gt;
 &lt;div class="col-md-4"&gt;

 &lt;/div&gt; 
 &lt;div class="col-md-3"&gt;
    &lt;div class="form-group"&gt;
    &lt;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"&gt;
    &lt;option value=""&gt;
        Select Brand
    &lt;/option&gt;
    &lt;/select&gt;
    &lt;/div&gt;

    &lt;div class="form-group"&gt;
    &lt;input type="hidden" name="delimiter" value=":" ng-model="delimiter" /&gt;
    &lt;input type="hidden" name="currency" value="$" ng-model="currency" /&gt;
    &lt;span&gt;
     {{selBrand.name}}{{delimiter}}{{selBrand.price}}{{currency}}
    &lt;/span&gt;
    &lt;/div&gt;

 &lt;/div&gt; 
 &lt;div class="col-md-4"&gt;

 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
&lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"&gt;
&lt;/script&gt;
&lt;script src="js/ui-bootstrap-tpls-2.5.0.min.js"&gt;&lt;/script&gt;
&lt;script src="js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Code:</p>

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

 });
</code></pre>

<p>Explanation:
 important point here is null check of the changed  value, i.e. if value is 'undefined' or 'null' we should to handle this situation.    </p>


<p>I have in my .html page a dropdown list,</p>

<p><strong>Dropdown:</strong></p>

<pre><code>&lt;select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"&gt;
    &lt;option value=""&gt;Select Account&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I want to execute an action when the user select a value. So In my controller I did: </p>

<p><strong>Controller:</strong></p>

<pre><code>$scope.$watch('blisterPackTemplateSelected', function() {
    alert('changed');
    console.log($scope.blisterPackTemplateSelected);
});
</code></pre>

<p>But the changing the value in the dropdownlist doesn't trigger the code : <code>$scope.$watch('blisterPackTemplateSelected', function()</code></p>

<p>As a result I tried another method with a : <code>ng_change = 'changedValue()'</code> on the select tag</p>

<p>and </p>

<p><strong>Function:</strong></p>

<pre><code>$scope.changedValue = function() {
   console.log($scope.blisterPackTemplateSelected);
}
</code></pre>

<p>But the <code>blisterPackTemplateSelected</code> is stored into a child scope. I read that the parent can't get access to the child scope.</p>

<p>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?</p>


Get value when selected ng-option changes

在我的.html页面中有一个下拉列表，下拉列表：<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate ...

问在选定的ng选项更改时获取值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在选定的ng选项更改时获取值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在选定的ng选项更改时获取值
EN