ng-repeat

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） - 或制作代码x.productid传递给addToCart方法

＆＃13;

＆＃13;

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);
  }

})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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);
}

您可能想知道为什么您可以访问视图中的父作用域，您可以通过google angular prototypal继承获取更多信息

Answer 6

您可以将 productId 作为函数参数传递，您可以使用ng-bind代替{{}}，这样可以提供更好的性能，而不会在DOM中呈现不需要的表达式。如果您在加载时在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);
}