Angular JS - Binding view and app.js - ng-repeat doesn't work
Question
I've created a ASP.NET MVC 4 project by using Angular JS. I wouldn't be able to create a JSFiddle for this example of code.
I notice that I retrieve well the categories and it prints well. Then, when I click on one of the categories represented by a tag '<a>' , my code goes to $scope.setActualItem of my app.js and the ajax call retrieves the right datas. But the changes are not printed in my view. However, I use "<div ng-repeat="p in products">" to get datas from the controller.
Do you have a solution ?
Thank you
app.js :
var appli = angular.module("Demo", []);
appli.controller('CategoryCtrl', function ($scope, $http) {
$http.get('/Category/GetCategories')
.success(
function (data) {
console.log(data);
$scope.categories = data;
}
);
$scope.setActualItem = function (index) {
$scope.currentItem = $scope.categories[index];
var idCat = $scope.currentItem.id;
console.log("passe ici");
$http.get('/Category/GetProductsByCategory/'+idCat)
.success(
function (data) {
console.log(data);
$scope.products = data;
}
);
};
});
My View :
<html ng-app="Demo">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="~/Scripts/app.js"></script>
</head>
<body ng-controller="CategoryCtrl">
@Html.Partial("~/Views/Header/Index.cshtml")
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-6">
<div class="no-padding">
<span class="title" style="padding-top: 20px;">CATEGORIES</span>
</div>
<a class ="list-group-item" ng-click="setActualItem($index)" ng-repeat="cat in categories">{{cat.name}}</a>
</div>
</div>
<div id="ProductListcategory">
ggfgfgfgfgf
<div ng-repeat="p in products">
<label>{{p.id}}</label>
<label>{{p.name}}</label>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2014-06-06 08:37:18
Use angular.copy and define $scope.products on begining
var appli = angular.module("Demo", []);
appli.controller('CategoryCtrl', function ($scope, $http) {
$scope.products = [];
$http.get('/Category/GetCategories')
.success(
function (data) {
console.log(data);
$scope.categories = data;
}
);
$scope.setActualItem = function (index) {
$scope.currentItem = $scope.categories[index];
var idCat = $scope.currentItem.id;
console.log("passe ici");
$http.get('/Category/GetProductsByCategory/'+idCat)
.success(
function (data) {
console.log(data);
angular.copy(data,$scope.products);
//or angular.copy(data.data, $scope.products);
}
);
};
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.