codelearner codelearner - 5 months ago 32
AngularJS Question

ng-change on select throwing an error

HTML



<tr dir-paginate="sale in payments | itemsPerPage: 6">
<td>{{sale.date}}</td>
<td>{{sale.transaction_id}}</td>
<td>{{sale.artist_details.seller_num}}</td>
<td>{{sale.artist_details.name}}</td>
<td>{{sale.exc_vat}} Kr</td>
<td>{{sale.total_price}}</td>
<td><select ng-change="released()" ng-options="released.item for released in releasedSeller.options" ng-model="released" ></select><span>{{released.item}}</span></td>
</tr>


CONTROLLER

$scope.released=function() {
console.log('pending');
}
$scope.releasedSeller = {
options : [{
item: 'Pending'
}, {
item: 'Released'
}]
}


I am using ng-change to call a function in selectbox. but i can get the options data,it is wrapping the controller, i am getting the payments data here from the controller.i am using the controller by mentioning in app.js (ui-router) but when i select some option, it is throwing an error as below.

angular.js:13236 TypeError: v2.released is not a function
at fn (eval at compile (angular.js:14086), <anonymous>:4:215)

Answer

As you are binding the selected value in "released" variable which will create a new varialbe in scope and overwrite the old "released" (function) you have written in the controller.

Wrong way :

ng-change="released()"

ng-model="released"

Right way :

ng-change="released()"

ng-model="selectedReleased"

<select ng-change="released()" ng-options="released.item  for released in releasedSeller.options" ng-model="selectedReleased" ></select>

I guess this is what causing the error.