ng-options 中的第一个更改显示为空，始终为空白

Question

当我更改 select 列表中的值时，第一次更改显示始终为空，第二次更改后显示

我尝试使用此代码：

<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>

我的清单：

$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",
    }]
}]

第一次更改后（select列表中另一项的离子）：

第二次更改后（select列表中另一项的离子）：

我想使用id和分类分组

当我加载我的页面时，我的 campaign.app_category 拥有一个值，在我 select 另一个项目之后我有一个显示空白：

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

我用的是angular1.5.8

SOLVED

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

Answer 1

好的，现在可以正常工作了：

  <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>

如果需要将其他项设置为默认项，只需更改数组中的ng-init编号即可。我选择 app_category_list[1] 是为了向您展示它也适用于默认的蓝色。

Answer 2

只需设置HTML如下：

ng-options="app_category as...

删除.id并仅保留对象。

ng-options 中的第一个更改显示为空，始终为空白

First change in ng-options display empty always blank

angularjs

angularjs-ng-options