如何从嵌套json数组中选择
How to select from nested json array
我有一个JSON我从API作为:
$scope.data = [{
"primary": "white",
"sub": ["white 1", "white 2", "white 3"]
},{
"primary": "black",
"sub": ["black 1", "black 2", "black 3"]
}];
我想按主和可选值分组数组子
:
**White**
white 1
white 2
white 3
**Black**
Black 1
Black 2
Black 3
我可以按主键分组,但不能获得内部值。我有:
<div ng-controller="myCtrl">
<select
ng-model="myOption"
ng-options="val.primary group by value.primary for value in data">
</select>
<div>
ng-model value: {{myOption}}
</div>
</div>
(这是我的小提琴:http://jsfiddle.net/jm6of9bu/648/)
您需要将数组平整化。即使使用group by
, ng-options
也可以在平面数组上工作:
$scope.data2 = [
{primary: "white", sub: "white1"},
{primary: "white", sub: "white2"},
{primary: "white", sub: "white3"},
{primary: "black", sub: "black1"},
{primary: "black", sub: "black2"},
{primary: "black", sub: "black3"},
];
那么你可以这样做:
<select
ng-model="myOption"
ng-options="value as value.sub group by value.primary for value in data2">
</select>
模型将被设置为value
对象-例如{primary: "white", sub: "white2"}
。如果您想将其设置为"white2"
, "black3"
等…然后使用:
ng-options="value.sub as value.sub group by value.primary for value in data2"
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [{
"primary": "white",
"sub": ["white 1", "white 2", "white 3"]
},{
"primary": "black",
"sub": ["black 1", "black 2", "black 3"]
}];
$scope.dataList=[];
$scope.data.forEach(function(value,index){
value.sub.forEach(function(temp,index){
$scope.dataList.push({
'groupType':value.primary,
'value':temp
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myCtrl">
<select
ng-model="myOption"
ng-options="data.value as data.value group by data.groupType for data in dataList">
</select>
<div>
ng-model value: {{myOption}}
</div>
</div>
最后我能解决这个小小的调整:
这是我尝试过的
<div ng-controller="myCtrl">
<select ng-model="myOption" ng-options="value.sub group by value.primary for value in data2">
我将嵌套JSON平展为:
function myCtrl($scope) {
datas = [{
"primary": "white",
"sub": ["white 1", "white 2", "white 3"]
},{
"primary": "black",
"sub": ["black 1", "black 2", "black 3"]
}];
$scope.data2 = [];
datas.forEach(function(entry){
entry.sub.forEach(function(sub){
$scope.data2.push({primary:entry.primary,sub:sub})
});
});
};
这里是小提琴:http://jsfiddle.net/jm6of9bu/658/
我可能不完全明白你想要什么,但是
如果您希望显示子值,则在分组之前将value .primary更改为value .sub
<div ng-controller="myCtrl">
<select
ng-model="myOption"
ng-options="val.sub group by value.primary for value in datas">
</select>
<div>
ng-model value: {{myOption}}
</div>
</div>
相关文章:
- Jquery 读取编号组中选择下拉列表的数组
- Javascript:从数组中的对象中选择属性
- Javascript没有从数组中选择背景颜色
- 如何从数组中选择特定标记
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- jquery从多维数组中进行动态相关选择
- 如何在javascript中使用click函数选择数组元素
- 构建HTML选择字段并使用JavaScript数组选择选项
- 将增量计数器连接到 JSON 响应循环中的数组选择器的末尾
- 使用 jQuery 使用 id 数组选择元素
- Jquery循环数组选择器与自定义元素ID的
- 转换后的 JSON 数组选择
- 对象数组-选择数组子集,其中对象属性为值数组
- knockoutjsforeach数组选择项值绑定
- 数组选择中的Javascript对象
- 按属性值的数组选择器函数
- 警告JS数组选择
- Javascript 和 HTML mix(数组选择)
- 作为jquery变量的值数组选择器
- 统一更新数组选择值