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 に答える