ng-repeat中的AngularJs DOM元素

Question

我在div標簽中有ng-repeat：

    <div ng-repeat="x in names">                                        
    <h1>{{x.product}}</h1>  
    <h2>{{x.brand}}</h2>    
    <h3>{{x.description}}</h3>  
    <h4>{{x.sum}}</h4>      
    <h5>{{x.productid}}</h5>        
    </div>
    <button ng-click="addToCart()">Add To Cart</button> 

還有我的AngularJS腳本：

$scope.addToCart = function () {        

        $scope.productId = $scope.x.productid;

        $http.post("api/shoppingCart/" + $scope.productId);
    }

我的問題是我無法訪問/獲取$ scope.productid的{{x.productid}}值。

Answer 1

您可以將項目引用（ x ）或生產ID x.productid傳遞給addToCart方法。

 var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) { $scope.names = [{ product: 'a', productid: 1 }, { product: 'b', productid: 2 }, { product: 'c', productid: 3 }, { product: 'd', productid: 4 }]; $scope.addToCart = function(x) { $scope.productId = x.productid; $http.post("api/shoppingCart/" + $scope.productId); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app" ng-controller="AppController"> <div ng-repeat="x in names"> <h1>{{x.product}}</h1> <h2>{{x.brand}}</h2> <h3>{{x.description}}</h3> <h4>{{x.sum}}</h4> <h5>{{x.productid}}</h5> <button ng-click="addToCart(x)">Add To Cart</button> </div> <p>productId: {{productId}}</p> </div> 

Answer 2

像這樣的更改按鈕<button ng-click="addToCart(x.productid)">Add To Cart</button> ，您的功能就像

`$scope.addToCart = function (productid) {        



    $http.post("api/shoppingCart/" + productid);
}`

Answer 3

我認為讓您工作的最佳可能性是在ng-repeat添加按鈕：

HTML：

<div ng-repeat="x in names">                                        
    <h1>{{x.product}}</h1>  
    <h2>{{x.brand}}</h2>    
    <h3>{{x.description}}</h3>  
    <h4>{{x.sum}}</h4>      
    <h5>{{x.productid}}</h5>     
    <button ng-click="addToCart(x.productid)">Add To Cart</button>    
</div>

JS：

$scope.addToCart = function(id) {        
    $scope.productId = id;
    $http.post("api/shoppingCart/" + $scope.productId);
};

Answer 4

您的addToCart已用完

 <div ng-repeat="x in names">                                        
   <h1>{{x.product}}</h1>  
   <h2>{{x.brand}}</h2>    
   <h3>{{x.description}}</h3>  
   <h4>{{x.sum}}</h4>      
   <h5>{{x.productid}}</h5>   
    <button ng-click="addToCart(x.productid)">Add To Cart</button>      
</div>

在JS文件中

$scope.addToCart = function (pid) {        

    $http.post("api/shoppingCart/"+ pid);
}

Answer 5

ng-repeat為每次迭代創建新作用域。 在這種情況下， x屬於ng-repeat的子范圍之一。

您只能在視圖內部訪問該范圍，因此可以執行以下操作：

<button ng-click="addToCart({{x.productId}})">Add To Cart</button> 

並像這樣修改您的控制器：

$scope.addToCart = function (productId) {        

    //$scope.productId = $scope.x.productid;

    $http.post("api/shoppingCart/" + productId);
}

您可能想知道為什么可以訪問視圖中的父級作用域，可以通過谷歌角度原型繼承獲取更多信息

Answer 6

您可以將productId作為函數參數傳遞，並且可以使用ng-bind代替{{}} ，這樣可以提高性能，並且不會在DOM中呈現不需要的表達式。 如果您一段時間使用{{}} {{x.product}}在加載時在DOM中看到{{x.product}} 。

在HTML中：

<div ng-repeat="x in names">                                        
    <h1 ng-bind="x.product"></h1>  
    <h2 ng-bind="x.brand"></h2>    
    <h3 ng-bind="x.description"></h3>  
    <h4 ng-bind="x.sum"></h4>      
    <h5 ng-bind="x.productid"></h5>     
    <button ng-click="addToCart(x.productid)">Add To Cart</button>    
</div>

在控制器中：

$scope.addToCart = function (productId) {        

    $http.post("api/shoppingCart/"+ productId);
}