在 AngularJS 中使用 "ng-options" 填充选项

Question

我有一个下拉菜单，我需要使用 AngularJS 用价格填充它。不幸的是，返回的 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"}}
]

仅当可用性设置为 AVAILABLE 时，我需要在此下拉列表中显示下面简单对象的价格以及复杂对象的价格。

我是angular的新手，不知道你有这样的结构是否有办法显示价格。有什么我可以用的吗？我试了一下过滤器，但开始出现一些错误，不得不恢复更改。

编辑：更新至 JSON。发现可能有多个与报价和颜色差异相关的价格。我需要显示所有可用的 complexObjects 和 simpleObjects 的所有价格。

Answer 1

已更新LINK

HTML代码：

<div ng-app="App" ng-controller="MainCtrl">
        <h3>Option 1 (standard)</h3>

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

Answer 2

您可以将 ng-repeat-start 和 ng-repeat-end 与 ng-if

一起使用

看到这个Demo

加价

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

Answer 3

您可以在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>

并过滤掉控制器中不可用的项目：

$scope.containers = [yourcontainerjson].filter(function ($c) {
        if ($c.availability === undefined || 
            $c.availability.availability == 'AVAILABLE') {
            return $c;
        }
 });

您还可以定义一个过滤器模块并将其应用到 ng-repeat 中。 Plunker.

在 AngularJS 中使用 "ng-options" 填充选项

Populating options using "ng-options" in AngularJS

javascript

json

angularjs

javascript-objects