在下拉菜单中显示嵌套的json数据 - cshtml javascript json

Question

我正在寻找一种“干净地”在下拉菜单中显示json数据的方法。

我收到的对象看起来是这样的：

"Outer": [ 
    { 
     "Inner1": "Some text here.", 
     "Inner2": true, 
     "Inner3": false, 
     "Inner4": true, 
     "Inner5": "A1", 
     "Inner6": "Another String" 
    }, 
    { 
     "Inner1": "Some text here.", 
     "Inner2": true, 
     "Inner3": false, 
     "Inner4": true, 
     "Inner5": "B1", 
     "Inner6": "Another String" 
    }, 
    { 
     "Inner1": "Some text here.", 
     "Inner2": true, 
     "Inner3": false, 
     "Inner4": true, 
     "Inner5": "C1", 
     "Inner6": "Another String" 
    } 
    ] 

当我把它放在一个常规选择下拉会有短短三年以显示为一个大的连接字符串，这使得所有的“内部”数据线感觉，但不是我想要完成的。

这里是我的下拉：

<tr> <td colspan="2"> <label> MyLabelTextHere <select class="col-sm-10" name="item" ng-model="item"> <option ng-repeat="item in outer" value="{{outer}}" title="{{item}}">{{item}}></option> </select> </label> </td> </tr>

我想这在某种程度上显示，其中内3个对象仍然是区分彼此，我需要看到的字段名称，以及作为它们的价值。

我希望这个问题有足够的细节。我愿意接受任何建议。谢谢你的时间！任何输入是非常感谢！

Answer 1

您的选项标签内，只要把你要明确，如值：

<tr> 
<td colspan="2"> 
    <label> 
     MyLabelTextHere 
     <select class="col-sm-10" name="item" ng-model="item"> 
      <option ng-repeat="item in outer" value="{{outer}}" title="{{item}}"> 
      Inner 1: {{ item.Inner1 }} - Inner 2: {{ item.Inner2 }} 
      </option> 
     </select> 
    </label> 
</td> 

和格式，只要你喜欢。但请注意，您不能在选择框中使用样式或HTML标签。你需要更多的定制来实现这一点，我已经使用角度引导UI来实现这样的事情。

如果密钥不一致或某事，你可以添加第二个NG重复和迭代像对象：

<ng-repeat="key, val in item"> 

或者写一个函数，对象和输出格式化字符串和你倒是做：

<option ng-repeat="item in outer" value="{{outer}}" title="{{item}}" ng-bind="formatMyObject(item)"></option> 

，并在控制器只是有这样一个功能：

$scope.formatMyObject = function(item) { 
    //format the object into a string here, do whatever 
    return item.Inner1 + " - " + item.Inner2; 
};