Remove from all and addclass to selected with ng-click in angularjs

Question

I have event when I click the text div1 for example will be bold, and remove bold from the other selected, I tried with addClass but it did not work. How can I resolve this? jsfiddle

HTML:

<div id='1_1' ng-click="addClassToSelected($event)">div1</div>
<div id='1_2' ng-click="addClassToSelected($event)">div1</div>
<div id='1_3' ng-click="addClassToSelected($event)">div1</div>
<div id='1_4' ng-click="addClassToSelected($event)">div1</div>
<div id='1_5' ng-click="addClassToSelected($event)">div1</div>
<div id='1_6' ng-click="addClassToSelected($event)">div1</div>
<div id='1_7' ng-click="addClassToSelected($event)">div1</div>

Angular:

$scope.addClassSelected = function(event){
            var id =event.target.id ;
            $('#'+id).addClass("bold-selected");
        };

CSS:

.bold-selected {
    font-weight: bold;
}

you should use `ng-repeat` then angular will make your life easy,, — Pankaj Parkar, May 08 '15 at 14:54

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

You really should be reading up on how to get away from jquery when working with angular. Start at this topic: "Thinking in AngularJS" if I have a jQuery background?

Here is the answer to your question though. First off your dom should look like this if it's going to be something repeated:

<div 
    data-ng-class="{
        'bold-selected': option.id == selectedId
       }"
    data-ng-repeat="option in data" 
    data-ng-click="addClassToSelected(option.id)"
    id="1_{{ data.id }}">
    div1
</div>

Second, this is what your controller would look like instead:

function MyCtrl($scope) {
    $scope.data = [{ id: 1 },{ id: 2 },{ id: 3 },{ id: 4 },{ id: 5 },{ id: 6 },{ id: 7 }];
    $scope.selectedId = false;
    $scope.addClassToSelected = function(id){
        $scope.selectedId = id;
    }
}

Here's the jsFiddle of the final version: http://jsfiddle.net/w2hfourg/

edited May 23 '17 at 12:06

Community

1
1

answered May 08 '15 at 14:58

Mathew Berg

28,625
11
69
90

i just want to add a class to selected no ng-repeat, this is just a example – kenza May 08 '15 at 15:07
in my case option.id is the div#id it self – kenza May 08 '15 at 15:21
Why do you have #ids on divs to begin with? – Mathew Berg May 08 '15 at 15:22
data-ng-class="{ 'bold-selected': myDivId == selectedId }" what i make in myDivId ?? – kenza May 08 '15 at 15:23
you just make my life so hard – kenza May 08 '15 at 15:33
You're not really using angular, you're making your own life hard by trying to incorporate both it and jquery. My question was why do your divs have ids on them? Why do they need them? In general angular applications only have ids for styling purposes. – Mathew Berg May 08 '15 at 15:38
can i use ng-show without id and without ng-repeat ! i dont like to use jQuery i try just select the div that i click it in – kenza May 08 '15 at 15:43

kenza · Answer 2 · 2015-05-08T16:34:52.283

0

jsfiddle the answer

<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
<span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>

edited May 08 '15 at 16:34

answered May 08 '15 at 16:02

kenza

195
1
4
16

1

You should add some explanation about what this is doing and why it solves the problem. – Rob Watts May 08 '15 at 16:25
i add a jsfiddle link – kenza May 08 '15 at 16:35

Remove from all and addclass to selected with ng-click in angularjs

2 Answers2