1

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

Jérémie Chazelle
  • 1,721
  • 4
  • 32
  • 70

2 Answers2

3

Just set the HTML as follows:

ng-options="app_category as...

Remove .id and let the object only.

Syl
  • 2,232
  • 8
  • 34
  • 45
1

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.

Setily
  • 814
  • 1
  • 9
  • 21
  • This is one way but why use ng-options and together? Isn't it better to set a value to the model? @Setily – EmptyCup Aug 18 '16 at 10:03
  • @EmptyCup: I edited my answer. You need to set a default option in some way. You can use the – Setily Aug 18 '16 at 10:17
  • my campaign.app_category is already set http://plnkr.co/edit/6XYAQXG6hVh2J2PkfXIG?p=preview – Jérémie Chazelle Aug 18 '16 at 12:10
  • @JérémieChazelle: yes, your ng-model is set. You need to also set ng-init="campaign.app_category = '' " – Setily Aug 18 '16 at 12:27
  • @Setily Thx for your answer, but it's not the problem – Jérémie Chazelle Aug 18 '16 at 12:28
  • @JérémieChazelle: How about now? :) I edited it again. Removed the id from ng-options and now it works correctly. Right? Here a working link: http://plnkr.co/edit/6XYAQXG6hVh2J2PkfXIG?p=preview – Setily Aug 18 '16 at 12:34