Question

我创建了一个提供json输出的休息服务 { “area1”：[ “为office_1” “为office_2” ] }

在UI上我想在两个不同的组合框中显示这个json地图的键和值。即一个组合框中的area1和另一个组合框中的office_1和office_2。但我无法实现这一目标这是我的组合框代码

<div class="col-xs-6">
 <h5>Select the Domain:</h5>
 <form role="form">
  <div class="input-group">
    <input type="text" class="form-control" ng-model="system">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul id="dropdown" class="dropdown-menu dropdown-menu-right" role="menu">
      <li ng-repeat="system in systems" class="input-lg">{{system.area}}</li>
    </ul>
  </div>
  </div>
 </form>
 </div>

Answer 1

this您要找的是什么？不确定我理解你的要求，但我已经这样做了：

CTRL：

$scope.systems = { "area1": [ "office_1", "office_2" ] }

查看：

<h5>Select the Domain:</h5>
 <form role="form">
  <div class="input-group">
    <input type="text" class="form-control" ng-model="systems.area1">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul id="dropdown" class="dropdown-menu dropdown-menu-right" role="menu">
      <li ng-repeat="system in systems.area1" class="input-lg">{{system}}</li>
    </ul>
  </div>
  </div>
 </form>

查看plunkr中的结果。

Answer 2

<div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul id="dropdown" class="dropdown-menu dropdown-menu-right" role="menu">
      <li ng-repeat="(key,value) in systems.area1" class="input-lg">{{value}}</li>
    </ul>
  </div>
</div>

Answer 3

首先，我认为你必须改变你的json响应，看起来像这样：

http://www.w3schools.com/json/

所以你的json响应会是这样的：

{“area1”：[{“first_office”：“office_1”，“second_office”：“office_2”}}}

通过这种方式，您可以通过“first_office”和“second_office”访问您的数据。

在完成所有这些之后，你必须构建你的控制器，你必须将你的json响应放到$ scope。即

$scope.result = response.area;

然后为控制器添加一个通用div：

<div ng-controller="your_controller">

并在div内部

 <ul id="dropdown1" class="dropdown-menu dropdown-menu-right" role="menu">
   <li ng-repeat="system in result.area1" class="input-lg">{{system.first_office}}</li>
 </ul>
 <ul id="dropdown2" class="dropdown-menu dropdown-menu-right" role="menu">
   <li ng-repeat="system in result.area1" class="input-lg">{{system.second_office}}</li>
 </ul>

div的结尾

 </div>

在Plunker中测试

http://plnkr.co/edit/eY8O92sVlkn6HSOpe0sy?p=preview

祝你好运。

创建一个使用ng-repeat获取数据的组合框

3 个答案: