Jérémie Chazelle Jérémie Chazelle - 3 months ago 8
AngularJS Question

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

Syl Syl
Answer

Just set the HTML as follows:

ng-options="app_category as...

Remove .id and let the object only.