如何在angularjs中的选择选项中将json数据显示为具有多选的optgroup答案

【问题标题】：How to show json data as optgroup with multiple-select in Select Option in angularjs如何在angularjs中的选择选项中将json数据显示为具有多选的optgroup
【发布时间】：2017-02-23 09:33:03
【问题描述】：

我尝试在 angularjs 中使用多选将 JSON 数据显示为 optgroup 选项，但没有成功

在 Html 中显示为：

<select ng-model="industrycatslect" ng-change="industryslected(industrycatslect)" multiple   ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory track by skilldata.id">
    <option value="">Select Location</option>
</select>

JSON 显示为：

"skillCategory": [
        {
            "id": "8",
            "group": "Technology",
            "value": " Software Engineering"
        },
        {
            "id": "17",
            "group": "Technology",
            "value": "Collaboration and Content Management"
        },
        {
            "id": "22",
            "group": "Functions",
            "value": "Procurement"
        },
        {
            "id": "23",
            "group": "Functions",
            "value": "Product"
        }
    ],

请帮助我，我认为我在“ng-options”中犯了一些错误。

【问题讨论】：

看起来你还没有发布完整的 HTML 和控制器代码。像魅力一样为我工作：plnkr.co/edit/AzanFFHxqgXm4f2X40X8?p=preview

标签： javascript angularjs json ionic-framework

【解决方案1】：

除了删除 track by 部分外没有太大变化

angular.module('test', []).controller('Test', Test);

function Test($scope) {
    $scope.skillCategory = [
        {
            "id": "8",
            "group": "Technology",
            "value": " Software Engineering"
        },
        {
            "id": "17",
            "group": "Technology",
            "value": "Collaboration and Content Management"
        },
        {
            "id": "22",
            "group": "Functions",
            "value": "Procurement"
        },
        {
            "id": "23",
            "group": "Functions",
            "value": "Product"
        }
    ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <select ng-model="industrycatslect" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory">
    <option value="">Select Location</option>
  </select>
  
  <br>
  {{industrycatslect}}
</div>

【讨论】：

感谢您的回复，但是我遇到了一个新问题，我无法获取所选数据 ID。请帮忙
@Neotrixs 您可以更改为ng-options="skilldata.id as... 用id 填充结果数组，或使用ng-options="skilldata as... 用来自数据源的所有信息填充结果数组。
谢谢，你真的拯救了我的一天。

【解决方案2】：

我认为这可能会对您有所帮助。您如何定义 skillCategory JSON 数据时出现错误。我希望这个 JSFiddle 有所帮助。它不是按 ID 排序的，而是按预期显示元素：

Answer 1

【讨论】：