在下拉列表中顯示嵌套的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-repeat並在對象上進行迭代，例如：

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