angularjs: nested ng-repeat creates blank values in selects

Question

Ok, first a simplified portion of the Javascript:

//the network values below are later dynamically 
//reloaded at runtime from a remote API
$scope.networks =  [{id: 5, name: "Network 1"}];

$scope.campaign = {
    paths: [
        {offers: [
             {name: "Site1",
              network: $scope.networks[0],
              uri: "http://uri1.com"},
             {name: "Site2",
              network: $scope.networks[0],
              uri: "http://uri2.com"}]}]};

And the relevant part of the HTML:

<div ng-repeat "path in campaign.paths">
   <div ng-repeat="offer in path.offers">
       <input type="text" ng-model="offer.name" />
       <input type="text" ng-model="offer.uri" />
       <select ng-model="offer.network"
           ng-options="n.id as n.name for n in networks">
       </select>
   </div>
</div>

The problem is that this always gives me a blank option as the first option whenever I try to set the model for the to offer.network. I have read Why does AngularJS include an empty option in select? and AngularJS - extra blank option added using ng-repeat in select tag, but they only seem to apply to selects that are at the top level (i.e., not using a model inside an ng-repeat). My problem is that I need to update a model that is part of a nested ng-repeat.

EDIT: I should have also included the below code; this is what is actually breaking everything. This code runs after the original array is set up:

$scope.getNetworks = function () {
    $http.get('/api/networks/nameid'
             ).success(function (data, status, headers, config) {
                 $scope.networks = data;
             });
};
$scope.getNetworks();

The above backend call returns an array of objects of the form {id: id, :name "name"}. And yes, I could populate the select statically from the server side, but I would really like to know how to make this work in the general case.

zs2020 · Accepted Answer · 2013-09-03T03:13:55.583

2

Since you use the n.id in the comprehension expression of the drop down list, you should pre-populate the offer.network with the id value like this

network: $scope.networks[0].id

And since the data is populated dynamically, you can do something like this. (For the demo purpose, I just use a very dumb way to populate the values. But you get the idea.)

$scope.getNetworks().then(function(data){
    $scope.networks = data;

    //populate the default value
    $scope.campaign.paths[0].offers[0].network = $scope.networks[0].id;
    $scope.campaign.paths[0].offers[1].network = $scope.networks[0].id;
})

Working Demo

edited Sep 03 '13 at 03:13

answered Sep 03 '13 at 02:34

zs2020

53,766
29
154
219

That solution works, as long as I don't change the networks array. I edited my above post to show the API call I am making that re-breaks things and causes the – TG-T Sep 03 '13 at 03:02
@TimothyGalebach Updated the demo and answer. Hope it helps. – zs2020 Sep 03 '13 at 03:14
Ah ok, makes sense. I have to repopulate whenever the array changes. – TG-T Sep 03 '13 at 03:22

angularjs: nested ng-repeat creates blank values in selects

1 Answers1