在下拉菜單中顯示嵌套的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; 
};