AngularJs DOM element inside ng-repeat

Question

I have my ng-repeat in div tag:

    <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> 

And my AngularJS script:

$scope.addToCart = function () {        

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

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

My problem is what I can't access/get {{x.productid}} value for my $scope.productid.

Answer 1

You can pass the item reference( x ) - or the production id x.productid to the addToCart method

 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

change button like this <button ng-click="addToCart(x.productid)">Add To Cart</button> and your function is like

`$scope.addToCart = function (productid) {        



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

Answer 3

I think the best possibility for you to make it work is to add the button in the 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

Your addToCart is out of

 <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>

in JS file

$scope.addToCart = function (pid) {        

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

Answer 5

ng-repeat creates new scopes for each iteration. In you case, the x is in one of the child scopes of your ng-repeat.

The only place where you have an access to this scope is inside your view, so what you can do is the following :

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

and modifying your controller like that :

$scope.addToCart = function (productId) {        

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

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

You may be wondering why you have access to a parent scope inside the view, you can google angular prototypal inheritance for more info

Answer 6

You can pass productId as a function parameter and you can use ng-bind instead of {{}} that's give you better performance and not rendered unwanted expression in DOM. if you use {{}} some time you see {{x.product}} in DOM while loading.

in 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>

in controller:

$scope.addToCart = function (productId) {        

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