錯誤：[$插值：INTERR]不能插： - 角

我已經試過

我開始之前，我知道getTotoal（）函數的$ scope.item聲明存在一些問題。下面是我的JS代碼：

var mainAngular = angular.module('bazaar', ['ngRoute']); 
mainAngular.controller('CartController', function($scope, $http) { 
var cJson = "./json/cart.json"; 
$http.get(cJson).success(function(response) { 
    $scope.items = response; 
}); 

$scope.getTotal = function(){ 
var total = 0; 
var num = $scope.items.length; 
for(var i = 0; i < num; i++){ 
    var product = $scope.items[i]; 
    total += (product.unitPrice * product.quantity); 
} 
return total; 
}; 
});

當我試圖調用getTotal功能，我得到下面的錯誤雖然函數的返回值是工作的罰款：

Error: [$interpolate:interr] Can't interpolate: Cart (Rs {{ getTotal() }}) 
TypeError: Cannot read property 'length' of undefined 
http://errors.angularjs.org/1.2.15/$interpolate/interr?p0=%20Cart%20(Rs%20%…%20&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined 
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:78:12 
at Object.$get.fn  (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:8421:26) 
at Object.scopePrototype.$watch.arguments.(anonymous function) (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1876:35) 
at Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:12023:40) 
at Scope.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1924:23) 
at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:12279:24) 
at Scope.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1987:22) 
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:1382:15 
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:3805:17) 
at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:1380:14)

HTML代碼：

<div class="dropdown cartMenu " ng-controller="CartController"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          <i class="fa fa-shopping-cart"> </i> 
          <span class="cartRespons"> Cart (Rs {{ getTotal() }}) </span> 
          <b class="caret"> </b> 
         </a> 
         <div class="dropdown-menu col-lg-4 col-xs-12 col-md-4 "> 
          <div class="w100 miniCartTable scroll-pane" > 
           <table> 
            <tbody> 
             <tr class="miniCartProduct" ng-repeat="item in items"> 
              <td style="width:20%" class="miniCartProductThumb"> 
               <div> <a href="{{ item.prodLink}}"> 
                 <img src="{{ item.prodImage}}" alt="img"> </a> 
               </div> 
              </td> 
              <td style="width:40%"><div class="miniCartDescription"> 
                <h4> <a href="{{ item.prodLink}} }}"> {{ item.productName}} </a> </h4> 
                <span class="size"> {{ item.size}} </span> 
                <div class="price"> <span>Rs {{item.unitPrice}} </span> </div> 
               </div></td> 
              <td style="width:10%" class="miniCartQuantity"><a> X {{item.quantity}} </a></td> 
              <td style="width:15%" class="miniCartSubtotal"><span> {{item.unitPrice * item.quantity}} </span></td> 
              <td style="width:5%" class="delete"><a> x </a></td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 

          <div class="miniCartFooter text-right"> 
           <h3 class="text-right subtotal"> Subtotal: Rs {{ getTotal() }} </h3> 
           <a class="btn btn-sm btn-danger"> <i class="fa fa-shopping-cart"> </i> VIEW CART </a> <a class="btn btn-sm btn-primary"> CHECKOUT </a> </div> 

         </div> 
        </div>

JSON文件：

[ 
{ 
    "prodImage":"images/product/3.jpg", 
    "prodLink":"product-details.html", 
    "productName":"Adidas T shirt", 
    "size":"XL", 
    "unitPrice":"2000", 
    "quantity":"1" 
},{ 

    "prodImage":"images/product/2.jpg", 
    "prodLink":"product-details.html", 
    "productName":"Adidas T shirt", 
    "size":"L", 
    "unitPrice":"2000", 
    "quantity":"1" 
},{ 
    "prodImage":"images/product/10.jpg", 
    "prodLink":"product-details.html", 
    "productName":"Adidas T shirt", 
    "size":"S", 
    "unitPrice":"200", 
    "quantity":"5" 
},{ 
    "prodImage":"images/product/4.jpg", 
    "prodLink":"product-details.html", 
    "productName":"Jeans", 
    "size":"32/34", 
    "unitPrice":"2000", 
    "quantity":"2" 
},{ 
    "prodImage":"images/product/5.jpg", 
    "prodLink":"product-details.html", 
    "productName":"NIKE T shirt", 
    "size":"XL", 
    "unitPrice":"2000", 
    "quantity":"2" 
},{ 
    "prodImage":"images/product/7.jpg", 
    "prodLink":"product-details.html", 
    "productName":"Reebok T shirt", 
    "size":"XL", 
    "unitPrice":"2000", 
    "quantity":"2" 
} 
]

來源

2015-07-10 Shashank Vivek

讓我看看html文件嗎？ – ngLover

@ngLover：新增 –

在你的模塊定義中使用ng-sanitize，也可以像[]變量一樣初始化項目，並且你可以在成功函數中或者在返回promise時將其推入。

var mainAngular = angular.module('bazaar', ['ngRoute','ngSanitize']); 


$scope.items= []; 
    var cJson = "./json/cart.json"; 
    $http.get(cJson) 
    .success(function(response) { 
     $scope.items.push(response) 
    }); 

    <span ng-bind-html="getTotal"></span>

來源

2015-07-10 09:01:22

$ scope.items = [];在我自己的代碼中做了訣竅。感謝您強調這一點。 :) –

@Shashank很高興它工作:) –

錯誤：[$插值：INTERR]不能插： - 角

回答

相關問題