CODEWITHSUNDEEP
jquerycssangularjs
graph
graph

Reputation: 387

css ".selected" in angular.js ng-repeat does not work properly

I have simple radio buttons. I have a .selected class that turns the "+10", "0" and "X" labels red if you select one of them. This works:

http://jsfiddle.net/KRMRU/18/

However, if all of the above reside inside an angular.js- table, this does not work

http://jsfiddle.net/KRMRU/17/

I assume that the jQuery $(this).addClass does not work properly and I'd need something else... Any ideas?

Upvotes: 0

Views: 399

Answers (2)

Mark Coleman
Mark Coleman

Reputation: 40863

Another option that does not rely on jQuery

(getting in the habit of using jQuery in AngularJs can result in pain if not used correctly)

How about just some simple css:

input[type="radio"]:checked+label{ background-color: red; }

If the radio is checked the next label will be marked with a red background.

(btw, why are you using Angular 0.10.5?)

Upvotes: 1

Pete
Pete

Reputation: 58442

Not sure why your click isn't working but I found a workaround:

if you use the following jQuery below your main function it should work:

$(document).ready(function() {
    $('#sites input:radio').addClass('input_hidden');
    $(document).on('click', '#sites label', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

http://jsfiddle.net/peteng/KRMRU/25/

Upvotes: 1

Related Questions