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

检查此链接http://plnkr.co/edit/gFSXHT0YUzD0lE9Y7wWZ?p=preview希望它能解决您的问题。

在渲染JSON数据之前，请确保格式正确。这是在线json解析器<div class="form-group"> <%= f.label :phases, class: "checkbox-inline" %> <div class="col-sm-8"> <%= f.collection_check_boxes :phases, phases, :first, :first %> </div> </div>

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

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

2 个答案: