当选定的ng-option更改时获取价值

一尘不染

当选定的ng-option更改时获取价值

angularjs

我在.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，我的代码在做什么错？

阅读 279

2020-07-04

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

2020-07-04