[英]Populating options using “ng-options” in AngularJS
I have a dropdown and I need to populate it with the prices using AngularJS. 我有一个下拉菜单,我需要使用AngularJS在其中填充价格。 Unfortunately the structure of the JSON returned is not straight forward and I am unable to change it as it belongs to a legacy system.
不幸的是,返回的JSON的结构并不简单,我无法更改它,因为它属于旧系统。
Here is a sample of the JSON: 这是JSON的示例:
[
{"name" : "simpleObjectName", "price" : "27.00"},
{"name" : "simpleObjectName2", "price" : ["26.99", "27.00", "28.00"]},
{"name" : "complexObjectName1", "availability" : { "price" : ["25.59", "26.40", "27.50"], "availability" : "AVAILABLE"}},
{"name" : "complexObjectName2", "availability" : { "price" : ["42.99", "22.00", "237.00"], "availability" : "UNAVAILABLE"}},
{"name" : "complexObjectName3", "availability" : { "price" : ["23.99", "216.00", "21.00"], "availability" : "UNAVAILABLE"}},
{"name" : "complexObjectName4", "availability" : { "price" : "21.00", "availability" : "AVAILABLE"}}
]
I need to show the prices of the simpleObjects below in this dropdown together with the prices of the complexObjects only if availability is set to AVAILABLE. 仅当可用性设置为AVAILABLE时,我才需要在此下拉列表中显示simpleObjects的价格以及complexObjects的价格。
I am new to angular and do not know whether there is a way to show the prices when you have such a structure. 我刚接触过角度,不知道有这种结构时是否有办法显示价格。 Is there something that I can use?
有什么可以用的吗? I gave filters a try but started getting a couple of errors and had to revert the change.
我尝试了过滤器,但开始遇到一些错误,不得不还原更改。
EDIT : Update to JSON. 编辑 :更新为JSON。 Found out there can be multiple prices related to offers and color differences.
发现存在与报价和颜色差异有关的多个价格。 I need to show all the prices for all available complexObjects and simpleObjects.
我需要显示所有可用的complexObjects和simpleObjects的所有价格。
You can display the objects in the ng-repeat as follows: 您可以按以下方式在ng-repeat中显示对象:
<div ng-app="App" ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="c as (c.name + ' - ' + c.price + c.availability.price) for c in containers">
<option value="">--select --</option>
</select>
</div>
And filter out the items that are unavailable in your controller: 并过滤掉控制器中不可用的项目:
$scope.containers = [yourcontainerjson].filter(function ($c) {
if ($c.availability === undefined ||
$c.availability.availability == 'AVAILABLE') {
return $c;
}
});
You could also define a filter module and apply that in the ng-repeat. 您还可以定义一个过滤器模块,并将其应用于ng-repeat中。 Plunker .
柱塞 。
You can use ng-repeat-start
and ng-repeat-end
with ng-if
您可以将
ng-repeat-start
和ng-repeat-end
与ng-if
MarkUp 标记
<select>
<option ng-repeat-start="r in records" ng-if="r.price">{{r.name}}-{{r.price}}</option>
<option ng-repeat-end ng-if="!r.price && r.availability && r.availability.availability == 'AVAILABLE'">{{r.name}}-{{r.availability.price}}</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.