Vraag Krijg waarde wanneer ng-optie-wijzigingen worden geselecteerd


Ik heb op mijn .html-pagina een vervolgkeuzelijst,

Laten vallen:

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

Ik wil een actie uitvoeren wanneer de gebruiker een waarde selecteert. Dus in mijn controller deed ik:

controller:

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

Maar het wijzigen van de waarde in de vervolgkeuzelijst activeert de code niet: $scope.$watch('blisterPackTemplateSelected', function()

Dientengevolge probeerde ik een andere methode met een: ng_change = 'changedValue()' op de select tag

en

Functie:

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

Maar de blisterPackTemplateSelected wordt opgeslagen in een onderliggende scope. Ik lees dat de ouder geen toegang kan krijgen tot de child scope.

Wat is de juiste / beste manier om iets uit te voeren wanneer een geselecteerde waarde in een vervolgkeuzelijst verandert? Als het methode 1 is, wat doe ik dan verkeerd met mijn code?


102
2018-02-25 14:06


oorsprong


antwoorden:


zoals Artyom zei dat je moet gebruiken ngChange en pass ngModel-object als argument voor uw functie ngChange

Voorbeeld:

<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 voorbeeld: http://jsfiddle.net/choroshin/9w5XT/4/


168
2018-02-25 14:27



Ik ben hier misschien te laat voor maar ik had het wel iets hetzelfde probleem.

Ik moest zowel de ID als de naam doorgeven aan mijn model, maar alle orthodoxe oplossingen zorgden ervoor dat ik code op de controller maakte om de wijziging aan te kunnen.

Ik heb me via een filter weggewerkt.

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

De "truc" is hier:

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

Ik gebruik het ingebouwde filter om de juiste naam voor het ID op te halen

Hier is een plunkr met een werkende demo.


31
2018-02-04 13:48



Gebruik het alsjeblieft ngChange richtlijn. Bijvoorbeeld:

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

En geef uw nieuwe modelwaarde in controller door als parameter:

ng-change="changeValue(blisterPackTemplateSelected)"

16
2018-02-25 14:20



Best practice is om een ​​object te maken (gebruik altijd a. In ng-model)

In je controller:

var myObj: {
     ngModelValue: null
};

en in je sjabloon:

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

Nu kun je gewoon kijken

myObj.ngModelValue

of je kunt de ng-change-richtlijn gebruiken als volgt:

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

De egghead.io-video "De punt" heeft echt een goed overzicht, net als deze zeer populaire vraag over stackoverloop: Wat zijn de nuances van scope prototyping / prototypische overerving in AngularJS?


8
2017-11-18 08:32



U kunt de ng-modelwaarde doorgeven via de functie ng-change als een 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>

Het is een beetje moeilijk om je scenario te kennen zonder het te zien, maar dit zou moeten werken.


5
2018-02-25 14:26



Je kunt zoiets doen

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

in plaats van een optie toe te voegen, moet u data-ng-opties gebruiken. Ik heb de optie Toevoegen gebruikt voor testdoeleinden


2
2017-11-12 12:31



Ik ben laat hier, maar ik heb hetzelfde soort probleem op deze manier opgelost, dat is eenvoudig en gemakkelijk.

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

en de functie voor ng-verandering is als volgt;

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

2
2018-06-04 04:32



U krijgt de waarde van de geselecteerde optie en de tekst uit de lijst / array met behulp van filter.
  editobj.FlagName = (EmployeeStatus | filter: {Waarde: 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>

1
2018-01-30 11:42