如何在选择放置中显示数组对象？

Question

我有一个数组对象，并在采用了棱角分明的js仅低于对象选择标签显示是我的数组对象

"matcherObject": { 
"Percentage Off": [ 
    { 
    "dealType": "Percentage Off", 
    "subCategory": "16% to 20%", 
    "recid": 2 
    }, 
    { 
    "dealType": "Percentage Off", 
    "subCategory": "10 to 15 %", 
    "recid": 1 
    }, 
    { 
    "dealType": "Percentage Off", 
    "subCategory": "21% to 25%", 
    "recid": 3 
    } 
], 
"Special Deals based on the event": [ 
    { 
    "dealType": "Special Deals based on the event", 
    "subCategory": "Buy 1 get one entr", 
    "recid": 52 
    }, 
    { 
    "dealType": "Special Deals based on the event", 
    "subCategory": "Buy 1 get one entr", 
    "recid": 54 
    } 
] 
}; 

这个对象我要如何选择标签，请帮我解决这个问题。 图像如何在用户界面显示如下图：

如果我选择标记的NG-模型应该如下格式显示如下

{"dealType": "Percentage Off","subCategory": "16% to 20%","recid": 2} 

Answer 1

需要，因为你要选择的对象使用NG选项。请参阅ng-options的角度文档。

var app = angular.module("App", []); 
 
app.controller("Ctrl", function($scope){ 
 
$scope.reqObj =  {"matcherObject": { 
 
"Percentage Off": [ 
 
    { 
 
    "dealType": "Percentage Off", 
 
    "subCategory": "16% to 20%", 
 
    "recid": 2 
 
    }, 
 
    { 
 
    "dealType": "Percentage Off", 
 
    "subCategory": "10 to 15 %", 
 
    "recid": 1 
 
    }, 
 
    { 
 
    "dealType": "Percentage Off", 
 
    "subCategory": "21% to 25%", 
 
    "recid": 3 
 
    } 
 
], 
 
"Special Deals based on the event": [ 
 
    { 
 
    "dealType": "Special Deals based on the event", 
 
    "subCategory": "Buy 1 get one entr", 
 
    "recid": 52 
 
    }, 
 
    { 
 
    "dealType": "Special Deals based on the event", 
 
    "subCategory": "Buy 1 get one entr", 
 
    "recid": 54 
 
    } 
 
] 
 
} 
 
}; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="App" data-ng-controller="Ctrl"> 
 
<select data-ng-model = "selOption" data-ng-options="perc as perc.subCategory for perc in reqObj.matcherObject['Percentage Off']"> 
 
</select> 
 

 
<hr /> 
 

 

 
{{ selOption | json }} 
 
</div>

Answer 2

既然你已经嵌套的列表，你必须使用ng-repeat两次，也给在name属性，以便您可以显示它。

我改变了一点：

$scope.matcherObject = [{ 
    "listName": "Percentage Off", 
    "items": [{ 
     "dealType": "Percentage Off", 
     "subCategory": "16% to 20%", 
     "recid": 2 
    }, { 
     "dealType": "Percentage Off", 
     "subCategory": "10 to 15 %", 
     "recid": 1 
    }, { 
     "dealType": "Percentage Off", 
     "subCategory": "21% to 25%", 
     "recid": 3 
    }], 
    }, { 
    "listName": "Special Deals based on the event", 
    "items": [{ 
     "dealType": "Special Deals based on the event", 
     "subCategory": "Buy 1 get one entr", 
     "recid": 52 
    }, { 
     "dealType": "Special Deals based on the event", 
     "subCategory": "Buy 1 get one entr", 
     "recid": 54 
    }] 
    }] 

HTML

<ul ng-repeat="listItem in matcherObject" > 
    {{listItem.listName}} 
    <li ng-repeat="item in listItem.items"> 
     {{item.subCategory}} 
    </li> 
</ul> 

检查工作示例这里：Plnkr

EDIT1：

下面的代码将做你的工作全无改变脚本：

<ul ng-repeat="listItem in matcherObject"> 
    <li ng-repeat="item in listItem"> 
     <ul> 
     <li ng-repeat="subItem in item"> 
      {{subItem.subCategory}} 
     </li> 
     </ul> 
    </li> 
</ul>