Dapatkan nilai saat opsi ng yang dipilih berubah

Saya memiliki di halaman .html saya daftar dropdown,

Dropdown:

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

Saya ingin menjalankan tindakan saat pengguna memilih nilai. Jadi di pengontrol saya, saya melakukan:

Pengontrol:

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

Tetapi mengubah nilai di daftar tarik-turun tidak memicu kode: $scope.$watch('blisterPackTemplateSelected', function()

Akibatnya saya mencoba metode lain dengan: ng_change = 'changedValue()'pada tag pilih

dan

Fungsi:

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

Tapi blisterPackTemplateSelecteddisimpan ke dalam lingkup anak. Saya membaca bahwa orang tua tidak bisa mendapatkan akses ke lingkup anak.

Apa cara yang benar / terbaik untuk mengeksekusi sesuatu ketika nilai yang dipilih dalam daftar dropdown berubah? Jika itu metode 1, apa yang saya lakukan salah dengan kode saya?

seperti yang dikatakan Artyom Anda perlu menggunakan ngChange dan meneruskan objek ngModel sebagai argumen ke fungsi ngChange Anda

Contoh :

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

Contoh langsung: http://jsfiddle.net/choroshin/9w5XT/4/

Saya mungkin terlambat untuk ini tetapi saya memiliki masalah yang agak sama.

Saya perlu meneruskan id dan nama ke dalam model saya tetapi semua solusi ortodoks meminta saya membuat kode pada pengontrol untuk menangani perubahan.

Saya macgyvered jalan keluarnya dengan menggunakan filter.

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

"Trik" ada di sini:

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

Saya menggunakan filter bawaan untuk mengambil nama yang benar untuk id

Ini plunkr dengan demo yang berfungsi.

Tolong, gunakan untuk itu ngChangedirektif. Sebagai contoh:

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

Dan berikan nilai model baru Anda di pengontrol sebagai parameter:

ng-change="changeValue(blisterPackTemplateSelected)"

Praktik terbaiknya adalah membuat objek (selalu gunakan a. In ng-model)

Di pengontrol Anda:

var myObj: {
     ngModelValue: null
};

dan di template Anda:

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

Sekarang Anda bisa menonton

myObj.ngModelValue

atau Anda bisa menggunakan direktif ng-change seperti ini:

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

Video egghead.io "The Dot" memiliki gambaran yang sangat bagus, seperti halnya pertanyaan stack overflow yang sangat populer ini: Apa nuansa dari scope prototypal / prototypical inheritance di AngularJS?

Anda bisa meneruskan nilai ng-model melalui fungsi ng-change sebagai parameter:

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

Agak sulit untuk mengetahui skenario Anda tanpa melihatnya, tetapi ini akan berhasil.

Anda bisa melakukan sesuatu seperti ini

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

daripada menambahkan opsi Anda harus menggunakan data-ng-options. Saya telah menggunakan opsi Tambah untuk tujuan pengujian

Saya terlambat di sini tetapi saya menyelesaikan masalah yang sama dengan cara yang sederhana dan mudah ini.

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

dan fungsi ng-change adalah sebagai berikut;

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

Anda akan mendapatkan nilai dan teks opsi yang dipilih dari daftar / larik dengan menggunakan filter.
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>

Saya memiliki masalah yang sama dan menemukan solusi unik. Ini bukan praktik terbaik, tetapi mungkin terbukti sederhana / bermanfaat bagi seseorang. Cukup gunakan jquery pada id atau kelas atau tag pilih Anda dan Anda kemudian memiliki akses ke teks dan nilai dalam fungsi perubahan. Dalam kasus saya, saya mengirimkan nilai opsi melalui layar / 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>

Kemudian di pengontrol Angular saya fungsi ng-change saya terlihat seperti ini:

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

Saya telah mencoba beberapa solusi, tetapi berikut ini cuplikan produksi dasar. Harap perhatikan keluaran konsol selama jaminan kualitas cuplikan ini.

Mark Up:

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

Kode:

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

 });

Penjelasan: poin penting di sini adalah pemeriksaan null dari nilai yang diubah, yaitu jika nilainya 'tidak ditentukan' atau 'nol', kita harus menangani situasi ini.