選擇多個項目，而不只是一個（angularJs）

我已經在div中顯示產品，用戶可以點擊它們來選擇它們。我遇到的問題是隻能選擇一種產品。我不想將此功能更改爲多選，功能應該收集產品的ID。選擇多個項目，而不只是一個（angularJs）

這是我的產品

<div class="product_item hit w_xs_full" ng-repeat="p in products track by $index" style="float: left; background-color: blue;"> 
    <figure class="r_corners photoframe type_2 t_align_c tr_all_hover shadow relative" 
      ng-click="selectUserItems($index)" ng-class="{sel: $index == selected}"> 
     <!--product preview--> 
     <img ng-src="images/products/{{p.images[0].thumbName}}" alt="{{p.name}}" class="tr_all_hover"> 
     <!--description and price of product--> 
     <figcaption> 
      <br> 
      <h5 class="m_bottom_10"><b>{{p.name}}</b></h5> 
      <p class="scheme_color f_size_large m_bottom_15" style="color:black;">Located in: <b>{{p.country}}</b></p> 
      <a href="#/swap/{{p.mainCategorieLink}}/{{p.subCategoryLink}}/{{p.alias}}"> 
       <button class="button_type_4 bg_scheme_color r_corners tr_all_hover color_light mw_0 m_bottom_15">See item</button> 
      </a> 
     </figcaption> 
    </figure> 
</div>

HTML，一旦所選項目的div的背景爲藍色，這是我選擇的項目

//select items 
$scope.selectUserItems = function(index){ 
    $scope.selected = index; 
};

控制器功能

.sel { 
    background-color:#5ACBFF; 
}

所以如何正確編寫控制器功能，以便您可以選擇多個div和$scope.selectd變量收集產品的ID。

來源

2016-02-23 Valor_

那麼你有什麼嘗試？如果你給我們你的代碼，我們實際上可以提供幫助。 –

也許你可以給我們一個最小的JSFiddle例子？ – Derlin

到目前爲止，我試圖推動數組中的變量，但問題是取消選項。一旦我解決了這個問題，着色div藍色不起作用，所以這就是爲什麼我恢復代碼，當我可以選擇一個 –

目前，$scope.selected = index;只保存一個索引，你要麼需要使它的數組，並切換目前的選擇：

變1

$scope.selected[index] = !$scope.selected[index];

，改變你的ngClass定義：

ng-class="{sel: $index[selected]}"

變2

或更改ngClick功能全：

ng-click="selectUserItems(p)"

而且selectUserItems功能

$scope.selectUserItems = function(item){ 
    item.selected = !item.selected; 
};

，改變你的ngClass定義：

ng-class="{sel: p.selected}"

來源

2016-02-23 08:22:36

哇，很好的工作。我甚至沒有時間去創造一些短褲或小提琴。 Thx –

很高興工作，歡呼:) –

在產品對象中，添加一個字段'selected'來控制是否選擇該項目。並切換在selected值NG點擊：

<figure class="...." ng-init="p.isSelected = false" 
     ng-click="p.isSelected = !p.isSelected" ng-class="{sel: p.isSelected}">

來源

2016-02-23 08:13:21 Mavlarn

選擇多個項目，而不只是一個（angularJs）

回答

相關問題