Angularjs - Access the value of dropdown in a nested ng-repeat

Question

I'm can't access the value of the select in the controller when the select is inside an ng-repeat.

Here is the sample of Html (Everything display properly):

<tr ng-repeat="reservationItem in dataList">
    <select ng-model="detail" ng-change= "haha($index)" ng-options="n for n in [1,2,3,42]" >
        <option value="Choose"> Choose </options>
    </select> 
</tr>

``

In the controller, inside the function haha() I try to get the value of the selected dropdown: $scope.haha = function(index){ console.log(index); console.log($scope.detail); }

The first console.log always show 0 The second console.log always shows undefined

Can someone tell me how to access the value of a select inside a nested from a controller. ? Thanks

your ng-model should be relative to your iteration in the ng-repeat...reservationItem.detail should be it's own parameter — beauXjames
– beauXjames, Commented Nov 16, 2014 at 6:12
But in this case as you explained, how do you access the value from the controller ? I tried $scope.reservationItem.detail andI got an error saying " TypeError: Cannot read property 'reservationDetail' of undefined". — user3648235
– user3648235, Commented Nov 16, 2014 at 13:31
reservationItem is just an alias you're using in the ng-repeat attribute for your dataList collection. $scope.dataList is your parent object...you'd be binding to a property of a member of the dataList array — beauXjames
– beauXjames, Commented Nov 17, 2014 at 5:09
yeah...and be sure to use reservationItem.detail for your ng-model — beauXjames
– beauXjames, Commented Nov 17, 2014 at 5:11
and haha($index) appears to be providing you with what index you want to query on the action...pass reservationItem instead of $index and you'd have your whole object with the chosen detail loaded — beauXjames
– beauXjames, Commented Nov 17, 2014 at 5:12

frozenamazon · Accepted Answer · 2014-11-16 06:27:02Z

0

In this case, you have multiple detail ng-model. This confuses the angular, look at ng-model like an ID. you can't have duplicate. You would need to pull the select out, or attached detail to reservationItem ie. reservationItem.detail

Also, you won't need ng-change as angular autobinds that value to the model.

edited Nov 16, 2014 at 6:27

answered Nov 16, 2014 at 6:17

frozenamazon

92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3648235 Over a year ago

But in this case as you explained, how do you access the value from the controller ? I tried $scope.reservationItem.detail andI got an error saying " TypeError: Cannot read property 'reservationDetail' of undefined".

frozenamazon Over a year ago

reservationDetail is actually a private variable, only known to the function. You will need to send that variable during a function call. Do something like this <select ng-model="reservationItem.detail" ng-change= "haha(reservationItem.detail)">

Collectives™ on Stack Overflow

Angularjs - Access the value of dropdown in a nested ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related