how can I set the value in select option field using angularjs

Question

I am getting the response as below and I would like to adjust those in select option tag. How can I set those please suggest the same

[null,"a","b","c ","d"]

My code is like

$http.get('v1/sport').success(function(data) {
    $scope.sports = [];
    //$scope.sports = data.data; 
    angular.forEach(data.data, function(value, key) {
        $scope.sports[value.sport_id] = value.name;
    });
});

In view

<select name="teamSport"
                      ng-model="player.sport_id"
                      ng-options="sport[player.sport_id] as sport[player.name] for sport in sports"
                      ng-change="changedSport()"
                      required>
                      <option value="" selected="selected">-- Select --</option>
                    </select>

here angular select documentation docs.angularjs.org/api/ng/directive/select — MasoodRehman
– MasoodRehman, Commented Feb 1, 2016 at 5:09
have you check {"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c "},{"sport_id":"4","name":"d"}] || {"sport_id":"3","name":"c "} Calling this i am getting {{sports}} || {{sports[player.sport_id]}} — Priya
– Priya, Commented Feb 1, 2016 at 5:43

Louie Almeda · Accepted Answer · 2016-02-01 05:13:27Z

1

Using ng-repeat and ng-model like this

<select ng-model='value'>
   <option ng-repeat='option in options'>
     {{option}}
   </option>
</select>

answered Feb 1, 2016 at 5:13

Louie Almeda

5,67035 silver badges41 bronze badges

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

Comments

Aron · Accepted Answer · 2016-02-01 05:13:39Z

0

$http.get('v1/sport') .success(function (data) { $scope.sports = [];  angular.forEach(data.data, function(value, key){ $scope.sports[value.sport_id] = value.name; }); }); 
$http.get('v1/selectedSport') .success(function (data) { $scope.selectedSport = data; });

And the view

<select 
       ng-model="selectedSport" 
       ng-options="sport[player.sport_id] as sport[player.name] for sport in sports">
</select>

answered Feb 1, 2016 at 5:13

Aron

15.9k3 gold badges35 silver badges71 bronze badges

2 Comments

Siva Over a year ago

The data given [null,"a","b","c ","d"] doesn't have sport_id and name

Aron Over a year ago

@Siva Not sure that is the question, but then again the question isn't clear...>_< I read the question as setting the selectedItem

Siva · Accepted Answer · 2016-02-01 09:32:20Z

You can directly use the data without converting it using forEach.

Here is the script which will render the dropdown using the data you gave in the comment [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"‌c"},{"sport_id":"4","name":"d"}]

You can set the selected in the $scope.selected variable.

var myApp = angular.module('myApp', [])

.controller('MyController', ['$scope', function($scope) {
  
      $scope.sports =  [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"‌c"},{"sport_id":"4","name":"d"}]; 
  
    $scope.selected = $scope.sports[2];
  
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
<div ng-controller="MyController">
{{selected}}
<select name="teamSport"
                      ng-model="selected"
                      ng-options="sport as sport.name for sport in sports"
                      ng-change="changedSport()"
                      required>
                      <option value="" selected="selected">-- Select --</option>
                    </select>
  </div>
  </div>

Collectives™ on Stack Overflow

how can I set the value in select option field using angularjs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related