Показать представление с двумя разными массивами JSON в Angular - PullRequest
Новая
       5

Показать представление с двумя разными массивами JSON в Angular

0 голосов
/ 11 сентября 2018

У меня есть два разных массива 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);

Ответы [ 3 ]

0 голосов
/ 11 сентября 2018 

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>
0 голосов
/ 11 сентября 2018

Не нужно два 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>
0 голосов
/ 11 сентября 2018

Вы можете использовать этот фрагмент кода 

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