更新 angularjs 中的数组或视图未更新后，ng-repeat 未更新

Question

我正在尝试为电子商务网站开发产品页面。我正在使用 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 = []; 
              }
          }
      }
  }

Answer 1

主要是您的 html 中似乎有错字：

错误

data-ng-repeat="products in products" >

这应该是：

data-ng-repeat="product in products" >

产品中的产品
让我知道这是否有效。