Fatal编程技术网
  • angularjs/
  • Angularjs 当所选ng选项更改时获取值

Angularjs 当所选ng选项更改时获取值

angularjs

Angularjs 当所选ng选项更改时获取值,angularjs,angularjs-scope,Angularjs,Angularjs Scope,我的.html页面中有一个下拉列表 下拉列表： <select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> <option value="">Select Account</option> &

我的.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.changedValue = function() {
   console.log($scope.blisterPackTemplateSelected);
}
但是更改dropdownlist中的值不会触发代码：
$scope.$watch（'SpallPackTemplateSelected'，function（）

因此，我尝试了另一种方法，在select标记上使用：
ng_change='changedValue（）'

及

功能：

<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.changedValue = function() {
   console.log($scope.blisterPackTemplateSelected);
}
但是，
SpallPackTemplateSelected
存储在子作用域中。我了解到父作用域无法访问子作用域

当下拉列表中的选定值发生更改时，执行某项操作的正确/最佳方法是什么？如果是方法1，我的代码有何错误？

请使用它
ngChange
指令。 例如：

<select ng-model="blisterPackTemplateSelected" 
        ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
        ng-change="changeValue(blisterPackTemplateSelected)"/>
您可以将ng模型值作为参数通过ng change函数传递：

ng-change="changeValue(blisterPackTemplateSelected)"

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


选择帐户
在看不到的情况下了解您的场景有点困难，但这应该是可行的。

正如Artyom所说，您需要使用ngModel对象并将其作为参数传递给ngChange函数

示例：


选择帐户
{{itemList}}
js:

函数ctrl（$scope）{
$scope.itemList=[]；
$scope.SpallPackTemplates=[{id:1，名称：“a”}，{id:2，名称：“b”}，{id:3，名称：“c”}]；
$scope.changedValue=函数（项）{
$scope.itemList.push（item.name）；
}       
}
活生生的例子：

我可能会迟到，但我也有同样的问题

我需要将id和名称都传递到我的模型中，但所有传统的解决方案都让我在控制器上编写代码来处理更改

我用过滤器过滤掉了它


角度模块（“应用程序”，[]）
.controller（“ctrl”、[“$scope”、函数（$scope）{
$scope.options=[
{id:1，名称：'Starbuck'}，
{id:2，名称：'Appolo'}，
{id:3，姓名：'Saul Tigh'}，
{id:4，名称：'Adama'}
]
}])
“诀窍”在于：

我正在使用内置过滤器检索id的正确名称

这里有一个演示程序。

您可以这样做

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


角度模块（“应用程序”，[]）
.controller（“ctrl”、[“$scope”、函数（$scope）{
$scope.changedValue=函数（项）{
警报（项目）；
}
}]);
选择帐户
添加
您应该使用数据ng选项而不是添加选项。我使用添加选项进行测试

最佳做法是创建对象（始终使用.in ng模型）

在控制器中：

var myObj: {
     ngModelValue: null
};
在模板中：

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options">
</select>
或者您可以使用ng change指令，如下所示：

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options"
    ng-change="myChangeCallback()">
</select>
egghead.io视频有一个非常好的概述，这是一个非常流行的堆栈溢出问题：

我也遇到了同样的问题，并找到了一个独特的解决方案。这不是最佳实践，但可能对某些人来说很简单/有用。只需在id或类或select标记上使用jquery，您就可以访问更改函数。在我的例子中，我通过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>
我来晚了，但我用简单易行的方法解决了同样的问题

<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>
您将使用过滤器从列表/数组中获取所选选项的值和文本。
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>
我已经尝试了一些解决方案，但这里是基本的生产代码段。请在对该代码段进行质量保证时注意控制台输出

加价：

<!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>
说明：
这里重要的一点是对更改的值进行空检查，即如果值为“未定义”或“空”，我们应该处理这种情况。

hi，回答很好。这里选项的值设置为项目的整行详细信息。我如何将其设置为id？hi@Alex Choroshin我有相同类型的问题，但当我从d收集数据时，我正在从数据库获取数据database如何在div中显示该数据？我在控制器的函数$scope.accountdetaildata=data.data中尝试此方法；在views div中尝试此代码{{accountdetaildata.balance}}，但数据未显示为从数据库接收的数据，我可以在控制台中看到该数据 
<!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

 });