html - Angularjs - How to 'ng-repeat' a div for full Items -
using angularjs, want create repeat shopping cart items in . .
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"} ] and controller js following ..
app.controller('itemcontroller', function($scope, data) { data.list(function(data) { $scope.items = data; }) }); factory following .. ..
app.factory('data', function($http){ return { list: function(callback) { $http.get('data.json').success(callback); } }; }); app.js following .. ..
var app = angular.module("myapp", []); html codes following ..
<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 later</a></li> </ul> </div> </section> the output following
but want repeat whole item me
you should not use ng-controller multiple times each section. if that, result in multiple http calls same json.
wrap entire html div , set ng-controller div. way, http call occur once.
other that, code seems working fine.
<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 later</a></li> </ul> </div> </section> </div>
Comments
Post a Comment