CODEWITHSUNDEEP
angularjs
andy
andy

Reputation: 2399

Selecting an 'object' logic

I have done this before but I can't for the life of me remember how. I want a user to be able to select a product by clicking a button in an <li> then have that passed to an array. As well as that, the <li> needs to have a class 'active' once that item is in the selected array:

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

is the HTML and this is the controller:

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

Does anyone have any pointers as to how to do this?

Upvotes: 0

Views: 32

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Here you are:

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

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

Use it like:

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

Working example: http://plnkr.co/edit/sPAN36?p=preview

Upvotes: 1

Related Questions