当选定ng选项如何更改时获取值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

我在我的.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,我的代码有什么问题?

提问于
用户回答回答于

你需要用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);
  }       
}

用户回答回答于

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

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

扫码关注云+社区