Setting initial value of a select list generated through ng-repeat in angular

Question

I am creating a select list from an associative array using ng-repeat.The ng-model of list is bound to a scope variable that has some initial value.The value of the options generated are the key of the array.

However, the list does not initialize with the value of the model.I thought it might have something to do with the asynchronous behaviour of ng-repeat, so i created a directive to capture the end of rendering and emit an event.This event is caught in the controller and is used to re-assign the value of the ng-model.

The event is caught correctly, but the update to the ng-model does not reflect.

If I attach a function to a button that updates the variable , it shows correctly in the list.

I know it is so because of the way ng-repeat works.How can i work around this automatically set the initial value after the list has been rendered.

Here is an example of my issue:

http://jsbin.com/gapemenova/1/edit?html,js,output

HTML:

    <h1 align='center'>
        {{value}}
   <select ng-model='value' >
    <option ng-repeat='(tid,groups) in templates' value='{{tid}}' on-last-repeat >{{tid}} </option>
</select>
      <button ng-click='refresh()' >Refresh</button>
</body>

JS:

  var app=angular.module('gobo',[]);

//Create A Directive To Detect The End Of ng-repeat cycle.
    app.directive('onLastRepeat',function(){
        return function(scope,element,attrs) {
            if(scope.$last) { setTimeout(function(){
                scope.$emit('onRepeatLast',element,attrs);
                },10);
                    }
        };
    });

app.controller('goboCtrl',function($scope){
            //Initial Value
                  $scope.value="2";
       $scope.$on('onRepeatLast', function(scope, element, attrs){
                    $scope.value='3';
          alert($scope.value); });

   //Data Source For ng-repeat
    $scope.templates={};
    $scope.templates["1"]=[{"prop":"value1"}];
    $scope.templates["2"]=[{"prop":"value2"}];
    $scope.templates["3"]=[{"prop":"value3"}];

    $scope.refresh=function(){
            $scope.value="2";      
     };

}); //Controller ends

Put the relevant code in the question itself. Questions should be self contained and we shouldn't need to go to external site just to review the intiial problem. A demo is a great addition ... but should only be secondary to the code found here — charlietfl
– charlietfl, Commented Jul 27, 2015 at 15:39
Added. The behaviour in question would be difficult to understand without the demo though.. — Devesh Sati
– Devesh Sati, Commented Jul 27, 2015 at 15:50
That's fine..it gives people the ability to review what you are doing..then decide if they want to further review a demo. — charlietfl
– charlietfl, Commented Jul 27, 2015 at 15:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Check this working demo: JSBin

Simply change the option to:

<option ng-repeat='(tid,groups) in templates' value='{{tid}}' 
    ng-model="value" ng-selected="value === tid" on-last-repeat >{{tid}}</option>

Adding ng-model binds the selected value to $scope.value. Using ng-selected to update the selected item dynamically.

Explanations

Updating at the end of ng-repeat through $on is out of Angular $digest lifecycle, you need to run $scope.$apply to trigger a $digest cycle manually. Check JSBin

ngClick will trigger a $scope.$apply by default. Check ngClick definition in Angular 1.4.1 Line 23244:

scope.$apply(callback);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 27, 2015 at 16:01

Joy

9,60011 gold badges50 silver badges99 bronze badges

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

2 Comments

Devesh Sati Over a year ago

Thanks for the answer @Shaojian. I am not really trying to find a solution by using ng-selected or ng-options. What I want is to figure out why capturing the end of ng-repeat and updating the model doesn't work, but updating it via some other function does!!

Joy Over a year ago

@DeveshSati Please check the Explanations in the updated answer.

jdmcnair · Accepted Answer · 2015-07-27 15:52:00Z

0

You should be using ng-options instead of using an ng-repeat to bind your options to your array. More on ng-options: https://docs.angularjs.org/api/ng/directive/ngOptions

answered Jul 27, 2015 at 15:52

jdmcnair

1,32515 silver badges33 bronze badges

1 Comment

Devesh Sati Over a year ago

Thanks for the answer @jdmcnair. I am not really trying to find a solution by using ng-selected or ng-options. What I want is to figure out why capturing the end of ng-repeat and updating the model doesn't work, but updating it via some other function does!!

Collectives™ on Stack Overflow

Setting initial value of a select list generated through ng-repeat in angular

2 Answers 2

Explanations

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Explanations

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related