选择'object'逻辑

Question

我以前做过这个，但我一辈子都不记得是怎么做的。我希望用户能够通过单击<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)
  }
})

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

Answer 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