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

debugcn 发表于 Dev

用户名

我有一个下拉菜单，我需要使用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时，我才需要在此下拉列表中显示simpleObjects的价格以及complexObjects的价格。

我刚接触角度，不知道当您采用这种结构时是否有一种方法可以显示价格。有什么我可以使用的吗？我尝试了一下过滤器，但开始遇到一些错误，不得不还原更改。

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

斯库布斯基

您可以按以下方式在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中。柱塞。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。