Как я могу сделать динамический нг-повтор, используя angularjs? - PullRequest
Новая
       0

Как я могу сделать динамический нг-повтор, используя angularjs?

0 голосов
/ 08 октября 2018

Ниже я добавил свои данные 

[{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"

}]

Я хочу сделать ng-repeat, но я не хочу жестко кодировать любое поле (name, version, description, applicationenvironment)
Как мне этого добиться?

МОЕЕ ожидание:

В ТАБЛИЦЕ должно получиться так

enter image description here

Ответы [ 4 ]

0 голосов
/ 08 октября 2018

Вам необходимо выполнить цикл дважды: один раз через каждый массив объектов для доступа к каждому объекту, а затем внутри каждого объекта для доступа к отдельным парам ключ-значение.

Я разместил код ниже: 

angular.module('app', [])
.controller('Controller1', function () {
    this.data = {
        "name":"testapp",
        "version":"2.0",
        "description":"testapp",
        "applicationenvironment":"angularjs"
    };
});

<div ng-app="app" ng-controller="Controller1 as c1">
    <table>

    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>

    <tr ng-repeat="c in c1.data">
       <table>
         <tr ng-repeat="(key, value) in c">
         <td> {{ key }} </td>
         <td> {{ value }} </td>
         </tr>
       </table>
    </tr>
    </table>
</div>
0 голосов
/ 08 октября 2018

Ваш массив должен быть объектом .Таким образом, ваша структура значительно упрощает.Просто извлеките ключ и значения из вашего объекта и переберите его для каждой строки.Затем отобразите ключ и значения в отдельных столбцах в строке: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.table = [{
    "name": "testapp",
    "version": "2.0",
    "description": "testapp",
    "applicationenvironment": "angularjs"
  }]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <table>

      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>

      <tr ng-repeat="(key, value) in table[0]">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>

    </table>
  </div>
</body>
</html>
0 голосов
/ 08 октября 2018

Теперь, поскольку ваш источник данных является массивом, вам нужно выполнить два вложенных ng-повторения 

let app = angular.module("table",[]);
    app.controller("tableCtrl", ["$scope", function($scope){

    $scope.data = [{
    "name":"testapp",
    "version":"2.0",
    "description":"testapp",
    "applicationenvironment":"angularjs"
    },
    {
    "name":"testapp 2",
    "version":"2.1",
    "description":"testapp 2",
    "applicationenvironment":"angularjs"
    }];
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="table" ng-controller="tableCtrl">
    <table ng-repeat="row in data">
     <tr><td>Key</td><td>Value</td></tr>
     <tr ng-repeat="(key,value) in row">
       <td>{{key}}</td><td>{{value}}</td>
     </tr>
    </table>
    </div>

Теперь, если вы сделаете это, ваша структура данных должна дать желаемый результат

0 голосов
/ 08 октября 2018

Хотя я не рекомендую вам иметь эту структуру, вы можете сделать что-то вроде этого: 

angular.module('app', [])
.controller('appController', function () {
    this.data = {
        "name":"testapp",
        "version":"2.0",
        "description":"testapp",
        "applicationenvironment":"angularjs"
    };
});

И ваш HTML будет выглядеть примерно так: 

<div ng-app="app" ng-controller="appController as vm">
    <ul>
         <li ng-repeat="(key, value) in vm.data"> {{ key }} : {{ value }}</li>
    </ul>
</div>

Есливам все еще нужно иметь данные внутри массива, как вы написали в вопросе, вам придется перебирать и массив, и объект.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...