Nhận giá trị khi ng-option đã chọn thay đổi

Tôi có trong trang .html của mình một danh sách thả xuống,

Trình đơn thả xuống:

<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
    <option value="">Select Account</option>
</select>

Tôi muốn thực hiện một hành động khi người dùng chọn một giá trị. Vì vậy, trong bộ điều khiển của tôi, tôi đã làm:

Bộ điều khiển:

$scope.$watch('blisterPackTemplateSelected', function() {
    alert('changed');
    console.log($scope.blisterPackTemplateSelected);
});

Nhưng việc thay đổi giá trị trong danh sách thả xuống không kích hoạt mã: $scope.$watch('blisterPackTemplateSelected', function()

Kết quả là tôi đã thử một phương pháp khác với: ng_change = 'changedValue()'trên thẻ select

và

Chức năng:

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

Nhưng blisterPackTemplateSelectedđược lưu trữ trong một phạm vi con. Tôi đọc rằng phụ huynh không thể truy cập vào phạm vi con.

Cách chính xác / tốt nhất để thực thi điều gì đó khi một giá trị đã chọn trong danh sách thả xuống thay đổi? Nếu đó là phương pháp 1, tôi đang làm gì sai với mã của mình?

như Artyom đã nói bạn cần sử dụng ngChange và chuyển đối tượng ngModel làm đối số cho hàm ngChange của bạn

Ví dụ :

<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);
  }       
}

Ví dụ trực tiếp: http://jsfiddle.net/choroshin/9w5XT/4/

Tôi có thể bị trễ cho việc này nhưng tôi đã phần nào cùng một vấn đề.

Tôi cần phải chuyển cả id và tên vào mô hình của mình nhưng tất cả các giải pháp chính thống đều yêu cầu tôi tạo mã trên bộ điều khiển để xử lý thay đổi.

Tôi đã tìm cách thoát khỏi nó bằng cách sử dụng một bộ lọc.

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

"Thủ thuật" là ở đây:

ng-change="selected_name=(options|filter:{id:selected_id})[0].name"

Tôi đang sử dụng bộ lọc tích hợp để truy xuất tên chính xác cho id

Đây là một plunkr với một bản demo đang hoạt động.

Vui lòng sử dụng ngChangechỉ thị cho nó . Ví dụ:

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

Và chuyển giá trị mô hình mới của bạn trong bộ điều khiển dưới dạng tham số:

ng-change="changeValue(blisterPackTemplateSelected)"

Cách tốt nhất là tạo một đối tượng (luôn sử dụng a. Trong ng-model)

Trong bộ điều khiển của bạn:

var myObj: {
     ngModelValue: null
};

và trong mẫu của bạn:

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options">
</select>

Bây giờ bạn chỉ có thể xem

myObj.ngModelValue

hoặc bạn có thể sử dụng lệnh ng-change như sau:

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options"
    ng-change="myChangeCallback()">
</select>

Video "The Dot" của egghead.io có một cái nhìn tổng quan thực sự tốt, cũng như câu hỏi tràn ngăn xếp rất phổ biến này: Các sắc thái của thừa kế nguyên mẫu / nguyên mẫu phạm vi trong AngularJS là gì?

Bạn có thể chuyển giá trị ng-model thông qua hàm ng-change dưới dạng tham số:

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

Có một chút khó khăn để biết kịch bản của bạn mà không nhìn thấy nó, nhưng điều này sẽ hiệu quả.

Bạn có thể làm điều gì đó như thế này

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

thay vì thêm tùy chọn, bạn nên sử dụng data-ng-options.Tôi đã sử dụng Add option cho mục đích thử nghiệm

Tôi đến muộn ở đây nhưng tôi đã giải quyết cùng một loại vấn đề theo cách đơn giản và dễ dàng này.

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

và chức năng cho ng-change như sau;

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

Bạn sẽ nhận được giá trị và văn bản của tùy chọn đã chọn từ danh sách / mảng bằng cách sử dụng bộ lọc.
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>

Tôi đã có cùng một vấn đề và tìm thấy một giải pháp duy nhất. Đây không phải là phương pháp hay nhất, nhưng nó có thể đơn giản / hữu ích cho ai đó. Chỉ cần sử dụng jquery trên id hoặc class hoặc thẻ chọn của bạn và sau đó bạn có quyền truy cập vào cả văn bản và giá trị trong hàm thay đổi. Trong trường hợp của tôi, tôi đang chuyển các giá trị tùy chọn qua 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>

Sau đó, trong bộ điều khiển Angular, chức năng ng-change của tôi trông như thế này:

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

Tôi đã thử một số giải pháp, nhưng đây là đoạn mã sản xuất cơ bản. Vui lòng chú ý đến đầu ra của bảng điều khiển trong quá trình đảm bảo chất lượng của đoạn mã này.

Đánh dấu:

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

Mã:

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

 });

Giải thích: điểm quan trọng ở đây là kiểm tra null của giá trị đã thay đổi, tức là nếu giá trị là 'không xác định' hoặc 'null' thì chúng ta nên xử lý tình huống này.