我创建了一个提供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>
答案 0 :(得分:0)
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中的结果。
答案 1 :(得分:0)
<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>
答案 2 :(得分:0)
首先,我认为你必须改变你的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中测试
祝你好运。