0

我以前做过，但我一生都记不起来是怎么做的。我希望用户能够通过单击按钮来选择产品，<li>然后将其传递给数组。除此之外，一旦该项目在选定的数组中，就<li>需要有一个“活动”类：

<li class="row" data-ng-repeat="product in products">
  <div class="col-lg-9">
    <h3>{{product.name}}</h3>
    <p>{{product.description}}</p>
  </div>
  <div class="col-lg-3">
    <button class="btn btn-primary" data-ng-click="selectProduct(product.id)">Select Product</button>
  </div>
</li>

是 HTML，这是控制器：

app.controller("MainController", function($scope, $http) {
  $scope.selected_products = []
  $scope.products = [
    {
      name: 'Example product',
      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, assumenda, dolor, ipsa, atque obcaecati tempora perspiciatis earum vitae amet cum nostrum blanditiis ducimus culpa molestiae temporibus porro debitis voluptatibus libero.',
      category: 'VT'
    },
    {
      name: 'Example product 2',
      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, assumenda, dolor, ipsa, atque obcaecati tempora perspiciatis earum vitae amet cum nostrum blanditiis ducimus culpa molestiae temporibus porro debitis voluptatibus libero.',
      category: 'VT'
    }
  ]

  $scope.selectProduct = function(name) {
    console.log(name)
  }
})

有没有人对如何做到这一点有任何指示？

4

1 回答 1

1

给你：

 $scope.isSelected = function(product){
      return this.selected_products.indexOf(product)>-1;
  }

  $scope.selectProduct = function(product) {
      if(!this.isSelected(product)){
          this.selected_products.push(product);    
      }
  }

像这样使用它：

 <button ng-disabled="isSelected(product)" data-ng-click="selectProduct(product)">Select Product</button>

工作示例：http ://plnkr.co/edit/sPAN36?p=preview

于 2013-10-16T10:09:30.117 回答