How to set the ng-class in order of item clicked?

Question

I have these 3 border classes:

.border1 {
  border: 1px solid #66FFFF;
}

.border2 {
  border: 1px solid #33CCFF;
}

.border3 {
  border: 1px solid #0099FF;
}

I want the first button that is clicked to gain the border1 class, 2nd button clicked the border2 class and same for border3.

Also I will eventually have code that prevents the user from selecting more than 3 buttons, so the user will only be able to select 3 buttons.

Current markup logic:

<div class="tag"
     ng-class="{'border1':selected1, 'border2':selected2, 'border3':selected3}"
     ng-mouseover="showTagDetails(t)"
     ng-click="clickTag(t)">{{t.name}}</div>

However, I'm unsure as how to write the logic to ensure that the 2nd and 3rd buttons gain the appropriate styles. How would one approach this problem?

$scope.clickTag = function(t) {

}

You mean that clicking last button first will add border1 class, then if I click in the middle it will get border2, etc? — dfsq, Jul 07 '15 at 20:33
@dfsq yup! Yeah buttons could be clicked out of order, but still the first button clicked needs `border1`, 2nd `border2` — Leon Gaban, Jul 07 '15 at 20:39

Pankaj Parkar · Accepted Answer · 2015-07-07T21:09:37.507

1

You could use $index here to mainatain a list of selected index.

Markup

<div class="tag-container">
    <div class="tag" ng-class="selected.indexOf($index)!== -1 ? 'border'+ (selected.indexOf($index) + 1): ''" 
     ng-mouseover="showTagDetails(t)" ng-click="clickTag($index)">
        {{t.name}}
    </div>
    <tag-details tag="t"></tag-details>
</div>

Code

$scope.clickTag = function(index) {
  //first check length and then restrict duplicate index,
  if ($scope.selected.length < 4 && $scope.selected.indexOf(index) === -1) {
    $scope.selected.push(index);
  }
}

Plunkr Demo

edited Jul 07 '15 at 21:09

answered Jul 07 '15 at 20:41

Pankaj Parkar

134,766
23
234
299

Hmm in the Plunkr, I see all buttons getting the border style now, instead of just 1. – Leon Gaban Jul 07 '15 at 20:43
@LeonGaban you want it for first three only? what class will be applied for other button then? – Pankaj Parkar Jul 07 '15 at 20:44
Yes only for the first 3, I'll have code later that prevents the user from selecting more than 3 buttons, sorry I should have put those details the question. – Leon Gaban Jul 07 '15 at 20:49
@LeonGaban thats really different from what you asked first – Pankaj Parkar Jul 07 '15 at 20:51

Shimon Brandsdorfer · Answer 2 · 2015-07-07T21:23:31.323

0

going with the way you did it till now, you just add a variable

var selectionCount = 0

then in your function:

$scope.clickTag = function(t) {
    selectionCount++;
    t['selected' + selectionCount] = true;
}

then in your HTML code you need to write:

ng-class="{'border1': t.selected1, 'border2': t.selected2, 'border3':t.selected3}"

edited Jul 07 '15 at 21:23

answered Jul 07 '15 at 21:05

Shimon Brandsdorfer

1,673
9
23

Had an error `Uncaught SyntaxError: Unexpected token [` I removed the `.` but still code didn't work – Leon Gaban Jul 07 '15 at 21:21
remove the dot, and it should work: http://plnkr.co/edit/3zR5nJyC0f8bKFDmGfUN?p=preview – Shimon Brandsdorfer Jul 07 '15 at 21:27

How to set the ng-class in order of item clicked?

2 Answers2