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

114

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

angularjs  angularjs-scope 
— xiaolong97427
source

Answers:

187

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

— 亚历克斯·乔罗申
source
嗨，很好的答案。在这里，选项的值设置为项目的整行详细信息。如何将其设置为ID？
— AmiLinn
嗨@Alex Choroshin我有相同类型的问题，但是当我从数据库收集数据时如何从数据库获取数据，如何在div中显示该数据？我尝试在控制器的功能$ scope.accountdetaildata = data.data; 在视图div中，我尝试使用此代码{{accountdetaildata .balance}}，但其中的数据未显示为从数据库接收到的数据，我可以在控制台中看到该数据
— Nadeem Ijaz，
32

我可能是这晚，但我有几分同样的问题。

我需要将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的正确名称

这是一个带有正在运行的演示的插件。

— 西蒙
source
20

请使用它的ngChange指令。例如：

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

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

ng-change="changeValue(blisterPackTemplateSelected)"
— 阿尔乔姆·普拉诺维奇（Artyom Pranovich）
source
8

最佳做法是创建一个对象（始终在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中范围原型/原型继承的细微差别是什么？

— 马丁·韦尔克（Martijn Welker）
source
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>

不了解您的情况就有点困难，但这应该可以。

— 威威
source
2

你可以做这样的事情

<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。我已经使用添加选项进行测试

— 索拉卜
source
2

我在这里迟到了，但是我以这种简单的方式解决了同样的问题。

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

ng-change的功能如下。

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };
— 乌斯曼
source
1

您将使用过滤器从列表/数组中获取所选选项的值和文本。
editobj.FlagName =（EmployeeStatus | filter：{Value：editobj.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>
— 拉胡尔·莫迪（Rahul Modi）
source
0

我遇到了同样的问题，找到了一个独特的解决方案。这不是最佳做法，但对某人来说可能很简单/有帮助。只需在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>

然后在我的Angular控制器中，我的ng-change函数如下所示：

    $scope.projectChange = function($scope) {
         $scope.project.title=$("#projectSelector option:selected").text();
     };
— edencorbin
source
0

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

标记：

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

 });

说明：这里的重点是对更改后的值进行空检查，即，如果值是“ undefined”或“ null”，我们应该处理这种情况。

— 基里尔·舒尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.