选择ng-option更改时获取值

Question

我在.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()'在select标签上尝试了另一种方法:

和

功能:

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

但是blisterPackTemplateSelected存储在子范围内.我读到父母无法访问子范围.

当下拉列表中的选定值发生变化时,执行某些操作的正确/最佳方法是什么？如果它是方法1,我的代码怎么办？

Answer 1

正如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/

Answer 2

我可能是这晚,但我有几分同样的问题.

我需要将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.

Answer 3

请使用它ngChange指令.例如:

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

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

ng-change="changeValue(blisterPackTemplateSelected)"

Answer 4

最佳实践是创建一个对象(总是在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"有一个非常好的概述,这个非常流行的堆栈溢出问题:AngularJS中范围原型/原型继承的细微差别是什么？

Answer 5

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

在没有看到它的情况下了解你的场景有点困难,但这应该有效.