Wert abrufen, wenn sich die ausgewählte ng-Option ändert

Ich habe auf meiner HTML-Seite eine Dropdown-Liste.

Dropdown-Liste:

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

Ich möchte eine Aktion ausführen, wenn der Benutzer einen Wert auswählt. Also habe ich in meinem Controller Folgendes getan:

Regler:

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

Das Ändern des Werts in der Dropdown-Liste löst jedoch keinen Code aus: $scope.$watch('blisterPackTemplateSelected', function()

Als Ergebnis habe ich eine andere Methode mit einem: ng_change = 'changedValue()'auf dem select-Tag ausprobiert

und

Funktion:

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

Das blisterPackTemplateSelectedwird aber in einem untergeordneten Bereich gespeichert. Ich habe gelesen, dass der Elternteil keinen Zugriff auf den untergeordneten Bereich erhalten kann.

Was ist der richtige / beste Weg, um etwas auszuführen, wenn sich ein ausgewählter Wert in einer Dropdown-Liste ändert? Was mache ich mit meinem Code falsch, wenn es Methode 1 ist?

Wie Artyom sagte, müssen Sie ngChange verwenden und das ngModel-Objekt als Argument an Ihre ngChange-Funktion übergeben

Beispiel :

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

Live-Beispiel: http://jsfiddle.net/choroshin/9w5XT/4/

Ich kann dies zu spät , aber ich hatte etwas das gleiche Problem.

Ich musste sowohl die ID als auch den Namen an mein Modell übergeben, aber bei allen orthodoxen Lösungen musste ich Code auf dem Controller erstellen, um die Änderung zu handhaben.

Ich habe mich mit einem Filter herausgefahren.

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

Der "Trick" ist hier:

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

Ich verwende den integrierten Filter, um den richtigen Namen für die ID abzurufen

Hier ist ein Plunkr mit einer funktionierenden Demo.

Bitte verwenden Sie dafür die ngChangeDirektive. Beispielsweise:

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

Und übergeben Sie Ihren neuen Modellwert in der Steuerung als Parameter:

ng-change="changeValue(blisterPackTemplateSelected)"

Die beste Vorgehensweise besteht darin, ein Objekt zu erstellen (verwenden Sie immer ein. In ng-model).

In Ihrem Controller:

var myObj: {
     ngModelValue: null
};

und in Ihrer Vorlage:

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

Jetzt können Sie einfach zuschauen

myObj.ngModelValue

oder Sie können die ng-change-Direktive wie folgt verwenden:

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

Das egghead.io-Video "The Dot" hat einen wirklich guten Überblick, ebenso wie diese sehr beliebte Frage zum Stapelüberlauf: Was sind die Nuancen der prototypischen / prototypischen Vererbung des Bereichs in AngularJS?

Sie können den Wert des ng-Modells über die Funktion ng-change als Parameter übergeben:

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

Es ist ein bisschen schwierig, Ihr Szenario zu kennen, ohne es zu sehen, aber das sollte funktionieren.

Sie können so etwas tun

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

Anstelle der Option add sollten Sie data-ng-options verwenden. Ich habe die Option Add zu Testzwecken verwendet

Ich bin spät dran, aber ich habe das gleiche Problem auf diese Weise gelöst, die einfach und leicht ist.

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

und die Funktion für ng-change ist wie folgt;

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

Sie erhalten den Wert und den Text der ausgewählten Option mithilfe des Filters aus der Liste / dem Array.
editobj.FlagName = (EmployeeStatus | filter: {Wert: 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>

Ich hatte das gleiche Problem und fand eine einzigartige Lösung. Dies ist keine bewährte Methode, kann sich jedoch für jemanden als einfach / hilfreich erweisen. Verwenden Sie einfach jquery für die ID oder Klasse oder Ihr Select-Tag und Sie haben dann Zugriff auf den Text und den Wert in der Änderungsfunktion. In meinem Fall übergebe ich Optionswerte über Segel / 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>

Dann sieht meine ng-change-Funktion in meinem Angular-Controller folgendermaßen aus:

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

Ich habe einige Lösungen ausprobiert, aber hier ist ein grundlegender Produktionsausschnitt. Bitte achten Sie bei der Qualitätssicherung dieses Snippets auf die Konsolenausgabe.

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>

Code:

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

 });

Erläuterung: Ein wichtiger Punkt hierbei ist die Nullprüfung des geänderten Werts. Wenn der Wert "undefiniert" oder "null" ist, sollten wir mit dieser Situation umgehen.