CODEWITHSUNDEEP
angularjsselect
Udara Herath
Udara Herath

Reputation: 885

Anjular js - two SELECT boxes but work only one

I have added 2 select boxes in my page like below

                    <div layout>

                       <md-input-container>
                           <label>Gender</label>
                           <md-select ng-model="selectedUser">
                               <md-option ng-value="user" ng-repeat="user in users">{{ user.sex }}</md-option>
                           </md-select>
                       </md-input-container>
                       </div>
                   <div layout>

                       <md-input-container>
                           <label>Location</label>
                           <md-select ng-model="selectedLocation">
                               <md-option ng-value="location" ng-repeat="loca in locations">{{ loca.location }}</md-option>
                           </md-select>
                       </md-input-container>
                   </div>

And js is like this

 angular
        .module('selectionApp', ['ngMaterial'])
        .controller('sliderCtrl', sliderCtrl);

      function sliderCtrl ($scope) {

         $scope.users = [
           { id: 1, sex: 'Male' },
           { id: 2, sex: 'Female' }
        ];

         $scope.locations = [
            { id: 1, location: 'A' },
            { id: 2, location: 'B' },
            { id: 3, location: 'C' }
        ];
     }

This load Gender select box correctly and second select box load the options but i can't select the specific option. Every time i reload it select the option "C". I want to know how to fix this.

Any help highly appreciate. Thank you,

Upvotes: 1

Views: 104

Answers (1)

Chirag Patel
Chirag Patel

Reputation: 373

Change ng-value="location" to ng-value="loca"

Your problem may be solve...

best of luck..

Upvotes: 2

Related Questions