Question

我想循环<div id="product">但不算不行，我想用json更改示例数据fakeModel更多详细信息，这里是preview，也许可以帮助我，

fakeModel = {

  id: 1,

  title: 'product',

  description: 'description',

  price: 10,

  tax: 0,

  vendorFees: 0,

  qty: 0

};

Answer 1

要以角度迭代列表，您可以尝试这样的事情：

<div ng-repeat="product in products">
    <div>{{product.title}}</div>
    <div>{{product.price}}</div>
</div>

为添加的div提供ID

<div id="product_{{product.id}}" ng-repeat="product in products">
    <div>{{product.title}}</div>
    <div>{{product.price}}</div>
</div>

Answer 2

请试试这个。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="namesCtrl">      

        <div ng-repeat="product in fakeModel">
            <div>Product name : {{product.title}}</div>
            <div>Product price : {{product.price}}</div>
        </div>  
    </div>

        <script>
            angular.module('myApp', []).controller('namesCtrl', function($scope) {
                $scope.fakeModel = [{
                      id: 1,
                      title: 'product',
                      description: 'description',
                      price: 10,
                      tax: 0,
                      vendorFees: 0,
                      qty: 0
                    },
                    {
                      id: 2,
                      title: 'product 2',
                      description: 'description',
                      price: 15,
                      tax: 0,
                      vendorFees: 0,
                      qty: 0
                    }];
            });
      </script>

如何在角度JS中使用Div元素循环Json

2 个答案: