[英]Angularjs not updating the view of ng-repeat after the model updates
[英]ng-repeat not updating after updating the array in angularjs or view is not updated
我正在嘗試為電子商務網站開發產品頁面。 我正在使用 angularjs ng-repeat 來顯示產品列表。 我試過 $scope.$apply() 它拋出錯誤,如摘要正在進行中。 我也有 $rootscope 。
唯一的視圖沒有更新,但是當我在控制台中檢查時它已更新。
這是我的代碼:
html
<a ng-click="addcolors('RED')">Red<i class="fa fa-plus"></i></a>
<a ng-click="addcolors('WHITE')">Red<i class="fa fa-plus"></i></a>
<div class="col-sm-4 col-xs-12" data-ng-repeat="products in products" >
<div class="productBox">
<div class="productImage clearfix">
<img ng-src="{{products.image}}" alt="products-img" ">
<div class="productMasking">
<ul class="list-inline btn-group" role="group">
<li><a data-toggle="modal" href=".login-modal" class="btn btn-default"><i class="fa fa-heart"></i></a></li>
<li><a href="cart-page.html" class="btn btn-default"><i class="fa fa-shopping-cart"></i></a></li>
<li><a class="btn btn-default" data-toggle="modal" href=".quick-view"><i class="fa fa-eye"></i></a></li>
</ul>
</div>
</div>
<div class="productCaption clearfix">
<a href="single-product.html">
<h5>{{products.productname}}</h5>
</a>
<h3>{{products.Price}}</h3>
</div>
</div>
</div>
JS
$scope.selectedcolors = ["red"];
$scope.addcolors = function (color) {
// here i add the colors to the array
$scope.loadfiltereddata();
}
$scope.loadfiltereddata = function () {
$scope.products = [];
$scope.products.length = 0;
console.log($scope.products);
$scope.just = [];
var productuniqueidpristine = "";
var productuniqueidstored = "";
var r = 0;
var productvariants = {};
var obj = {}
var m = 0;
$scope.colors = [];
$scope.resultArray = [];
for (var i = 0; i < $scope.mainproductsdata.length; i++) {
var index = functiontofindIndexByKeyValue($scope.mainproductsdata, "ColorName", $scope.mainproductsdata[i].ColorName);
if ((index != null)||($scope.selectedcolors.length<1)) {
var productuniqueidpristine = $scope.mainproductsdata[i].productuniqueid;
var productuniqueidstored = $scope.mainproductsdata.filter(function (value) { return value.productuniqueid === productuniqueidpristine }).length;
m = r + 1;
if (m < productuniqueidstored) {
var productvariants = {
uniqueid: $scope.mainproductsdata[i].UniqueID,
colorname: $scope.mainproductsdata[i].ColorName,
colorcode: $scope.mainproductsdata[i].ColorCode,
sizename: $scope.mainproductsdata[i].SizeName
}
$scope.just.push(productvariants);
// $scope.just.push(productvariants);
r++;
}
else if (m == productuniqueidstored) {
var productvariants = {
uniqueid: $scope.mainproductsdata[i].UniqueID,
colorname: $scope.mainproductsdata[i].ColorName,
colorcode: $scope.mainproductsdata[i].ColorCode,
sizename: $scope.mainproductsdata[i].SizeName
}
$scope.just.push(productvariants);
var obj = {
id: $scope.mainproductsdata[i].id,
productname: $scope.mainproductsdata[i].productname,
image: $scope.mainproductsdata[i].productimage,
price: $scope.mainproductsdata[i].Price,
variants: $scope.just
};
$scope.products.push(obj);
r = 0;
$scope.just = [];
}
}
}
}
主要是您的 html 中似乎有一個錯字:
錯誤
data-ng-repeat="products in products" >
這應該是:
data-ng-repeat="product in products" >
產品中的產品
讓我知道這是否有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.