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

在下拉列表中显示嵌套的json数据 - cshtml javascript json

1 个答案: