選擇一個'對象'邏輯

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