如何使用具有字符串数组的 JSON 对象填充选择 ng-options？答案

【问题标题】：How to populate select ng-options with JSON object that has an string array?如何使用具有字符串数组的 JSON 对象填充选择 ng-options？
【发布时间】：2017-03-22 20:19:50
【问题描述】：

目前我有这个 JSON 对象：

 {
    "hospitalId" : "0002",
    "name" : "test form",
    "procedureId" : "0002-testform",
    "steps" : [ 
        {
            "title" : "Brand",
            "value" : [ 
                "jonson", 
                "smith", 
                "braun"
            ]
        }, 
        {
            "title" : "Procedure type",
            "value" : [ 
                "total", 
                "unicompartimental"
            ]
        }
    ]
}

我需要在多选中显示它，如下所示：

<strong>Brand</strong>
<ul>braun</ul>
<ul>jonson</ul>
<ul>smith</ul>

<strong>Procedure type</strong>
<ul>total</ul>
<ul>unicompartimental</ul>

它们需要按steps.title和steps.value排序，问题是：我不知道如何使用<select ng-options>标签正确显示它们，这是我尝试过的：

<select multiple ng-model="step" ng-options="step[0].value  group by step.title for step in loadedSteps.steps " ></select>

给我：品牌未定义

<select multiple ng-model="step" ng-options="step.value  group by step.title for step in loadedSteps.steps | orderBy:['value']"></select>

给我：品牌 [jonson, smith, braun]

我也尝试过使用嵌套的<option>，但它没有排序...

任何帮助将不胜感激，在此先感谢

【问题讨论】：

标签： angularjs arrays json sorting grouping

【解决方案1】：

这就是您要寻找的答案。

您应该使用两个ng-repeat，第一个用于显示title，另一个用于在标题内显示values。

第一个ng-repeat 以标题开头，以该标题中的值结束。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = 
 {
 "hospitalId": "0002",
 "name": "test form",
 "procedureId": "0002-testform",
 "steps": [{
  "title": "Brand",
  "value": [
   "jonson",
   "smith",
   "braun"
  ]
 }, {
  "title": "Procedure type",
  "value": [
   "total",
   "unicompartimental"
  ]
 }]

}
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <div >
      <label>{{step.title}}</label>
    <select>
    <option ng-repeat-start="step in names.steps | orderBy:'title'" ng-bind="step.title"></option>
    <option ng-repeat-end ng-repeat="opt in step.value | orderBy:'step.value':true" ng-bind="' - ' + opt"></option>
    </select>
    
  </div>
</div>


</body>
</html>

请运行这个 sn-p

HEre is a plunker

【讨论】：

@Camilo，请检查这个答案。
谢谢你的朋友，它工作得很好，我很感激！