hema begur hema begur - 4 months ago 27
AngularJS Question

ng-change with ng-repeat on Select drop down menu triggers only once

Here is my controller:

App.controller('LicenseController', ['$scope', 'licenseService', function($scope, licenseService) {
var self = this;

$scope.productTypes = {name:'', productID:''};
self.productTypes = {name:'', productID:''};
$scope.selectedProduct = {name:'', productID:''};
$scope.productVersions = {productVersion:'', versionID:''};
self.productVersions = {productVersion:'', versionID:''};

$scope.fetchProductType = function(){
licenseService.fetchProductType()
.then(
function(d) {
self.productTypes = d;
$scope.productTypes = d;
console.log($scope.productTypes[1].name);
console.log($scope.productTypes[1].productID);
},
function(errResponse){
console.error('Error while fetching Currencies');
}
);
};

$scope.fetchProductType();

$scope.getProductVersions = function(){

console.log($scope.selectedProduct.productID);
licenseService.getProductVersions($scope.selectedProduct.productID)
.then(
function(d) {
$scope.productVersions = d;
self.productVersions = d;
console.log($scope.productVersions[1].productVersion);
console.log($scope.productVersions[1].versionID);
},
function(errResponse){
console.error('Error while creating User.');
}
);
};

}]);


And HTML :

<tr>
<td>
<label for="sel1">Product Type</label>
<select class="form-control" id="sel1" ng-model=productTypes ng-change="getProductVersions()">
<option ng-repeat="type in ctrl.productTypes" value="" >
{{type.name}}
</option>
</select>
</td>
</tr>

<tr>
<td>
<label for="sel1">Product Version</label>
<select class="form-control" id="ver" ng-model="productVersions" >
<option ng-repeat="version in ctrl.productVersions" value="" >
{{version.productVersion}}
</option>
</select>
</td>
</tr>


ng-change triggers only once, on the first change of product type. I also want to pass the selected product type on change. Can someone help how I can do this?

Answer

I ran into a similar problem. The way I was able to fix it was using the ng-options directive instead of looking through the options.

Here is an example in Angular's 1.x documentation:

    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">

https://docs.angularjs.org/api/ng/directive/ngOptions

Comments