Getting selected values from dropdown options inside nested ng-repeat in AngularJS

Question

I'm trying to access value of selected value of dropdown options. But problem is that i already have ng-repeat as parent div and inside that options in dropdowns are also using ng-repeat. So basically its nested ng-repeat.

So I'm not able to access selected values.

jsFiddle

<div ng-controller="csrClrt">
<div  ng:repeat="item in items track by $index">

  <md-list one class="md-accordion">
            <md-input-container>
                   <label>Face Style:</label>
                  <md-select ng-model="style">
                   <md-option ng-value="user.name" ng:repeat="user in styles">{{user.name}}</md-option>
                  </md-select>
          </md-input-container>  
   </md-list>
</div>
<div>
<input type="button" value="get selected value" ng-click="getvalue()"/>
</div>

                    <p>
                    if i ttry out of parent ng repeat
                    </p>
                     <md-input-container>
                   <label>Face Style:</label>
                  <md-select ng-model="style">
                   <md-option ng-value="user.name" ng:repeat="user in styles">{{user.name}}</md-option>
                  </md-select>
          </md-input-container>
                              <div>

<input type="button" value="get selected value" ng-click="getvalue()"/>
                              </div>

                                 </div>

AngularJS

angular.module('MyApp', ['ngMaterial'])
.controller('csrClrt', function ($scope) {
     $scope.items=["0"];
     stylesdata=[{name:"a"},{name:"b"},{name:"c"}];
     var style=[];
     for(var i=0;i<stylesdata.length;i++)
     {
       style.push({
        name:stylesdata[i].name
       })
     }
     $scope.styles=style;
     $scope.getvalue=function()
     {

       alert($scope.style);
     }
})

Vinod Louis · Accepted Answer · 2017-02-01 07:11:42Z

2

Repeat isolates the scope if you want to do it without an isolated scope then bind the variables as an object and not an independent variable like this

<md-select ng-model="a.style">

and access it as

 alert($scope.a.style);

see fiddle https://jsfiddle.net/44a0thqt/1/

answered Feb 1, 2017 at 7:11

Vinod Louis

4,9061 gold badge31 silver badges50 bronze badges

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

8 Comments

Ramesh Rajendran Over a year ago

But the both dropdown is showing the same name, because the model name is same. It' should be provided with different name.

Vinod Louis Over a year ago

yes if we need different select value for each elements then need a diff name but if same then was my ans in terms of why same name in repeat and outside behaves differently

Ramesh Rajendran Over a year ago

Yup. but it's bad idea to use two different controls with same model name.

Vinod Louis Over a year ago

@RameshRajendran thats true but I have no idea whether the OP que was in terms of implementation or idea of understanding :).

Ramesh Rajendran Over a year ago

Just go with two alert box to show the value. You can see it from my fiddler. Any way OP is soo silent here. I'll go to lunch . bye! bye!.

|

Ramesh Rajendran · Accepted Answer · 2017-02-01 07:27:20Z

1

You had same model name for the both dropdowns ng-model="style">. that is a problem

You should provide spate name to the ng-model directive

Update

Also your first select tag inside of the ng-repeat So it will be create multiple select tag's. This time you should pass the index and get the data.

So kindly change your first drodown model name to ng-model="item.style">. So now you can get the value by using the index count as like $scope.items[indexNumber].style

See the demo : https://jsfiddle.net/44a0thqt/3/

edited Feb 1, 2017 at 7:27

answered Feb 1, 2017 at 7:13

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Collectives™ on Stack Overflow

Getting selected values from dropdown options inside nested ng-repeat in AngularJS

2 Answers 2

8 Comments

Update

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Update

Comments

Your Answer

Sign up or log in

Post as a guest

Related