如何使用 AngularJS 使输出数据动态结构化？

Question

我是 angularJS 的新手，正在制作一个简单的应用程序，但我发现很难使用动态数据创建输出。

这是我的 html -

<div ng-app="MyApp">
  <div ng-controller="TabsDemoCtrl">
    <div ng-controller="TabsDemoCtrl">  
      <h1> How to make output dynamic data like this?</h1>
      <table ng-repeat="customize in data">
        <tr>
          <th colspan="2">{{customize.product.name}}</th>
        </tr>
        <tr>
          <td colspan="2">Assets</td>
        </tr>
        <tr>
          <td>{{ How to bind ouput dynamic attribute data ? }}</td>
          <td>{{ How to bind ouput dynamic subattribute ? }}</td>
        </tr>
      </table>

    </div>
  </div>
</div>

这是我的 JS -

angular.module('MyApp', [
    'ui.bootstrap']);

(function(MyApp) {
  'use strict';
  MyApp.controller('TabsDemoCtrl', ['$scope', function($scope) {
    // categories
    $scope.data = [
    {
        product : {
            name  : 'Product 1'
        },
        assets : {
            color : {
                black : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png'
            }
        }
    },
    {
        product : {
            name  : 'Product 2'
        },
        assets : {
            soles : {
                black : '/file/840ec1ff-6d27-40af-b4ca-277aa09ad147.png',
                red : '/file/1970f2e2-b7a0-439c-98d9-b9ea1604c227.png'
            },
            material : {
                black : '/file/aebe8f68-60fd-4fda-bd46-00e80f190ba2.png',
                green : '/file/e225e20d-5b97-4a60-8337-0551064a8d8c.png'
            },
            lining : {
                blue : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png',
                red : '/file/280fecb5-ebe5-47cb-85f4-4d1bf6dd8ed0.png'
            }
        }
    }
];


  }]);
})(angular.module('MyApp'));

我试图在此 link demo 中输出动态结构数据，但它没有显示。

那么如何用这个动态数据制作视图呢？

Answer 1

快速提示：你可以使用

<li ng-repeat="(key,val) in product.assets"></li>

呈现所有键和值。现在你必须检查 val 是一个对象还是一个字符串。如果它是一个对象，则必须渲染另一个级别的 KV 对...

<div>
    <ul>
      <li ng-repeat="product in data">
        <p>{{product.product.name}}</p>
        <ul>
          <li ng-repeat="(key,val) in product.assets">
          {{key}}
            <ul>
              <li ng-repeat="(key,val) in val">
                {{key}} => {{val}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

我会让你做模板来显示递归数据和数据验证。不要在字符串上使用 (key,val) 模板递归！！

参考这个：http://jsfiddle.net/brendanowen/uXbn6/8/

Answer 2

检查这个link http://plnkr.co/edit/gFSXHT0YUzD0lE9Y7wWZ?p=preview希望它能解决你的问题。

在呈现 JSON 数据之前确保格式正确。这是在线 json 解析器 https://jsonformatter.curiousconcept.com/

如果它解决了您的问题，请告诉我。谢谢

如何使用 AngularJS 使输出数据动态结构化？

How to make output data dynamic structure using AngularJS?

javascript

underscore.js

angularjs

angularjs-ng-repeat

lodash