在Angular中显示具有两个不同JSON数组的视图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Angular中显示具有两个不同JSON数组的视图相关的知识，希望对你有一定的参考价值。
我有两个不同的JSON数组，我想在我的视图中使用ng-repeat。
我有第一个JSON数组作为文本值，我用它来创建字段数。
["center", "80mm", "retain", "22pt", "bold", "140%", "18pt", "bold", "140%", "36pt", "11pt", "bold", "normal", "absolute", "211mm", "20mm", "20mm", "20mm", "center", undefined, undefined, "end-on-even", "even-page", "9pt"]
我为标签获得了秒JSON数组，我很困惑如何在我的视图中使用它。
["text-align", "space-before", "space-before.conditionality", "font-size", "font-weight", "line-height", "font-size", "font-weight", "line-height", "space-before", "font-size", "font-weight", "line-height", "position", "top", "bottom", "right", "left", "text-align", "", "", "force-page-count", "break-before", "font-size"]
因为我的第二个JSON数组被称为键，而第一个JSON被称为值。
这就是我在我看来做的事情： -
<div class="col-md-6" ng-repeat="record in textvalue track by $index">
<div class="form-group">
<label for="exampleFormControlSelect1" ng-repeat="records in attrnames">{{records}}</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>{{record}}</option>
</select>
</div>
</div>
EDIT添加了两个数组的控制器映射： -
$scope.textvalue = $scope.jsonObj.stylesheet['attribute-set']
.map(x => {
if (Array.isArray(x.attribute))
return x.attribute.map(y => y['__text']);
else
return [x.attribute['__text']];
})
.reduce((accu, cur) => accu.concat(...cur), []);
console.log($scope.textvalue);
//filter out names
$scope.attrnames = $scope.jsonObj.stylesheet['attribute-set']
.map(x => {
if (Array.isArray(x.attribute))
return x.attribute.map(y => y['_name']);
else
return [x.attribute['_name']];
})
.reduce((accu, cur) => accu.concat(...cur), []);
console.log($scope.attrnames);
答案
你能使用这段代码吗？
$scope.labelValue = ["center", "80mm", "retain", "22pt", "bold", "140%", "18pt", "bold", "140%", "36pt", "11pt", "bold", "normal", "absolute", "211mm", "20mm", "20mm", "20mm", "center", undefined, undefined, "end-on-even", "even-page", "9pt"];
$scope.property = ["text-align", "space-before", "space-before.conditionality", "font-size", "font-weight", "line-height", "font-size", "font-weight", "line-height", "space-before", "font-size", "font-weight", "line-height", "position", "top", "bottom", "right", "left", "text-align", "", "", "force-page-count", "break-before", "font-size"];
html代码段：
<div class="col-md-6" ng-repeat="label in labelValue">
<div class="form-group">
<label for="exampleFormControlSelect1">{{property[$index]}}</label>
<select class="form-control">
<option>{{label}}</option>
</select>
</div>
</div>
另一答案
在这种情况下，不需要两个ng-repeat。您可以使用索引进行全局ng-repeat
<div class="col-md-6" ng-repeat="record in attrnames track by $index">
<div class="form-group">
<label for="exampleFormControlSelect1">{{records}}</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>textvalue[{{$index}}]</option>
</select>
</div>
</div>
另一答案
angular.module("MyApp",[])
.controller("MyCtrl", function($scope){
$scope.arrjson1 =["center", "80mm", "retain", "22pt", "bold", "140%", "18pt", "bold", "140%", "36pt", "11pt", "bold", "normal", "absolute", "211mm", "20mm", "20mm", "20mm", "center", "undefined", "undefined", "end-on-even", "even-page", "9pt"]
;
$scope.arrjson2 = ["text-align", "space-before", "space-before.conditionality", "font-size", "font-weight", "line-height", "font-size", "font-weight", "line-height", "space-before", "font-size", "font-weight", "line-height", "position", "top", "bottom", "right", "left", "text-align", "", "", "force-page-count", "break-before", "font-size",];
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<span ng-repeat="x in arrjson2 track by $index">
{{x}} : <span><b>{{arrjson1[$index]}}
</span><br/>
</span>
</div>
</div>以上是关于在Angular中显示具有两个不同JSON数组的视图的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Angular 中将动态 JSON 对象数组导出为 CSV？
Angular.js ng-repeat 数组显示为 json
显示 Json 数组 Angular 5 HttpClient