CODEWITHSUNDEEP
angularjsangularjs-ng-options
Jérémie Chazelle
Jérémie Chazelle

Reputation: 1818

First change in ng-options display empty always blank

When I change the value from the select list, the first change display is always empty, and after the second change I have the display

I try with this code :

<select name="app_category_id" ng-model="campaign.app_category" ng-options="app_category.id as app_category.name group by app_category.app_category_pool[0].name for app_category in app_category_list | orderBy:['app_category_pool[0].name', 'name'] track by app_category.id" required>
</select>

My list :

$scope.app_category_list = [{
    "id": 31,
    "code": "RED",
    "name": "Red",
    "app_category_pool": [{
        "id": 1,
        "code": "CATEGORY_1",
        "name": "Category 1"
    }]
}, {
    "id": 32,
    "code": "BLUE",
    "name": "Blue",
    "app_category_pool": [{
        "id": 1,
        "code": "CATEGORY_1",
        "name": "Category 1",
    }]
}, {
    "id": 33,
    "code": "YELLOW",
    "name": "Yellow",
    "app_category_pool": [{
        "id": 2,
        "code": "CATEGORY_2",
        "name": "Category 2",
    }]
}]

After the first change (selection of another item from list) :

enter image description here

After the second change (selection of another item from list) :

enter image description here

I would like to use the id and group by category

When I load my page, my campaign.app_category own a value, after I select another item and I have a display blank:

$scope.campaign = {
    app_category: {
        "id": 31,
        "code": "RED",
        "name": "Red",
        "app_category_pool": [{
            "id": 1,
            "code": "CATEGORY_1",
            "name": "Category 1"
        }]
    }
}

I use angular 1.5.8

SOLVED

http://plnkr.co/edit/6XYAQXG6hVh2J2PkfXIG?p=preview

Upvotes: 1

Views: 487

Answers (2)

Syl
Syl

Reputation: 2232

Just set the HTML as follows:

ng-options="app_category as...

Remove .id and let the object only.

Upvotes: 3

Setily
Setily

Reputation: 822

Ok, so here it is working:

  <select name="app_category_id"
          ng-init="campaign.app_category = app_category_list[1]"
          ng-model="campaign.app_category" 
          ng-options="app_category as app_category.name group by app_category.app_category_pool[0].name for app_category in app_category_list | orderBy:['app_category_pool[0].name', 'name'] track by app_category.id"
          required>
  </select>

If you need to set another item as the default item, just change the ng-init number in the array. I selected the app_category_list[1] to show you that it works for Blue as default as well.

Upvotes: 1

Related Questions