AngularJS fill $scope.selected with object from <select>

Question

I have a problem with filling a scope with the correct data an keeping the correct attribute.

I've a small PHP script which returns an id, a name and a time as json array.

 {
  "times": [
    {
      "id": "myID",
      "name": "myName",
      "time": "40:00:00"
    },
    ...(10 more objects)
}

I want to create a dropdown element with the name as name and the id as value. I did this over a ng-repeat and this works very well.

<select name="StPl_Code" class="form-control" id="field-stpl-name" ng-model="selected">
    <option ng-repeat="i in times"  value="{{i.id}}">{{i.name}}</option>
</select>

My problem is, that I want to save the selected i in $scope.selected to use it's time value for an other input field without losing the value in the value attribute

Here is my angular code

  app.controller('auftraegeCrtl', function($scope, $http){
      $scope.selected = '';
      $http.get('index.php?page=times&json=true').success(function(data, status, headers, config){
        $scope.times = data.times;
      }).error(function(data, status, headers, config){
      });
  });

Use ng-change on select element...docs.angularjs.org/api/ng/directive/select — Anirudh Mangalvedhekar
– Anirudh Mangalvedhekar, Commented Nov 21, 2016 at 15:02
I thought there would be some working inline attributes instead of calling a function. I'll check this — mirko911
– mirko911, Commented Nov 21, 2016 at 15:04

jbrown · Accepted Answer · 2016-11-21 15:12:56Z

1

You will want to use the ng-options directive, like this:

<select name="StPl_Code" class="form-control" id="field-stpl-name" ng-model="selected" ng-options="i.id as i.name for i in times"></select>

You can see it working here

answered Nov 21, 2016 at 15:12

jbrown

3,0351 gold badge18 silver badges22 bronze badges

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

1 Comment

mirko911 Over a year ago

I just found it <select name="StPl_Code" class="form-control" id="field-stpl-name" ng-model="selected" ng-options="item as item.name for item in times track by item.time">

Massi Issar · Accepted Answer · 2016-11-21 15:15:45Z

0

Try this :

 $scope.selected = {};

instead of :

 $scope.selected = '';

answered Nov 21, 2016 at 15:15

Massi Issar

4035 silver badges23 bronze badges

Comments

jkris · Accepted Answer · 2016-11-21 15:17:40Z

0

Use 'Ng-options' instead.

<select ng-options="i as i.name for i in times track by item.id" ng-model="selected"></select>

This will set $scope.selected to the object selected

answered Nov 21, 2016 at 15:17

jkris

6,6691 gold badge24 silver badges31 bronze badges

Collectives™ on Stack Overflow

AngularJS fill $scope.selected with object from <select>

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related