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

114

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?

xiaolong97427
quelle

Antworten:

187

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/

Alex Choroshin
quelle
Hallo, tolle Antwort. Hier wird der Wert der Option als ganze Zeilendetails des Elements festgelegt. Wie kann ich es auf id setzen?
AmiLinn
hi @Alex Choroshin Ich habe die gleiche Art von Problem, aber ich erhalte Daten aus der Datenbank, wenn ich Daten aus der Datenbank sammle. Wie kann ich diese Daten in einem Div anzeigen? Ich versuche dies in der Controller-Funktion $ scope.accountdetaildata = data.data; und in Ansichten div versuche ich diesen Code {{accountdetaildata .balance}}, aber Daten werden dort nicht als von der Datenbank empfangene Daten angezeigt und ich kann diese Daten in der Konsole sehen
Nadeem Ijaz
32

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.

Simon
quelle
20

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)"
Artyom Pranovich
quelle
8

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?

Martijn Welker
quelle
5

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.

Wawy
quelle
2

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

Saurabh
quelle
2

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

    };
Usman
quelle
1

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>
Rahul Modi
quelle
0

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();
     };
Edencorbin
quelle
0

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.

Kirill Shur
quelle