Question

使用Angularjs，我想在中创建重复的购物车项目。

的Json

[{"src": "img/T1.jpg", "itemname": "solid green cotton tshirt", "style": "MS13KT1906", "colour": "Blue", "size": "s", "qty": "1", "price": "11.00"},
{"src": "img/T2.jpg", "itemname": "cotton tshirt", "style": "MS13KT1906", "colour": "Green", "size": "s", "qty": "1", "price": "11.00"}
]

和控制器Js如下 ..

app.controller('itemController', function($scope, Data)
{
Data.list(function(Data)
{
$scope.items = Data;

})


});

工厂如下 .. ..

app.factory('Data', function($http){

return {

list: function(callback) {

$http.get('data.json').success(callback); 

}
};
});

app.js如下 .. ..

var app = angular.module("myApp", []);

HTML代码如下 ..

<section class="section2" ng-controller="itemController">
<div class="fiqure1" ng-repeat="item in items" > 

<img data-ng-src="{{item.src}}" />

</div>
<div class="item_style" ng-controller="itemController">
<ul ng-repeat="item in items">

<li>{{item.itemname}}</li>
<li>Style #: {{item.style}}</li>
<li>Colour: {{item.colour}}</li>
<li>Size: {{item.size}}</li>
<li>QTY:
<input type="text" size="3">
</li>
<li><sup>$</sup>{{item.price}}</li>
</ul>
<ul>
</ul>
</div>
<div class="quantity" ng-controller="itemController">
<ul ng-repeat="item in items">
<li>{{item.size}}</li>
<li>
<input type="text" ng-model="item.qty" size="3">
</li>
<li><sup>$</sup>{{item.price}}</li>
</ul>
</div>
<div class="buttons">
<ul>
<li><a href="#" ng-click="open(product);">edit</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">save for later</a></li>
</ul>
</div>
</section>

输出如下

enter image description here

但我想重复任何人帮助我的整个项目

Answer 1

每个部分不应多次使用ng-controller。如果你这样做，它将导致多次http调用以获得相同的json。

使用div包装整个html并将ng-controller设置为该div。这样，http调用只发生一次。

除此之外，您的代码似乎工作正常。

<div ng-controller="itemController">
  <section class="section2">
    <div class="fiqure1" ng-repeat="item in items">

      <img data-ng-src="{{item.src}}" />

    </div>
    <div class="item_style">
      <ul ng-repeat="item in items">

        <li>{{item.itemname}}</li>
        <li>Style #: {{item.style}}</li>
        <li>Colour: {{item.colour}}</li>
        <li>Size: {{item.size}}</li>
        <li>QTY:
          <input type="text" size="3">
        </li>
        <li><sup>$</sup>{{item.price}}</li>
      </ul>
      <ul>
      </ul>
    </div>
    <div class="quantity">
      <ul ng-repeat="item in items">
        <li>{{item.size}}</li>
        <li>
          <input type="text" ng-model="item.qty" size="3">
        </li>
        <li><sup>$</sup>{{item.price}}</li>
      </ul>
    </div>
    <div class="buttons">
      <ul>
        <li><a href="#" ng-click="open(product);">edit</a></li>
        <li><a href="#">remove</a></li>
        <li><a href="#">save for later</a></li>
      </ul>
    </div>
  </section>
</div>

Angularjs - 如何为完整项目“重复”一个div

1 个答案: