1

The issue I am facing now is jQuery addClass doesn't work under ng-repeat.

The code below is from my partial page. I am trying to highlight the image when the user select it, unfortunately it doesn't get selected since I placed under ng-repeat div (first span3 div). On the other hand I can select the image with second span3 div - dynamic without ng-repeat (loading only one image only). Both uses the same jQuery script (posted below as well).

Is there any alternative method to execute the task

Any assistance will be greatly appreciated :) Thanks alot

Partial page code: 

        <div class="item active">
            <!-- Three columns of text below the carousel -->
            <div class="container">
                <div class="row" >
                    <div class="span12">
                            <div class="span3" ng-repeat="path in paths.paths | limitTo:3">
                                <div>   
                                    <label >
                                        <input  type="radio" ng-click="update_path_progress(path.id)" name="optionsRadios" ng-model="$parent.pathid" id="{{path.id}}" value="{{path.id}}" >
                                        <input class="well"type="image" ng-src="img/language/{{path.description.split(' ').join('_')}}.png" alt="" id="pathImg"/>
                                        <h6>{{path.name}}</h6>
                                    </label>
                                </div>
                            </div>
                            <div class="span3">
                                <label >
                                    <input  type="radio" ng-click="update_path_progress(path.id)" name="optionsRadios" ng-model="$parent.pathid" id="{{path.id}}" value="{{path.id}}" >
                                    <input class="well"type="image" ng-src="img/language/{{path.description.split(' ').join('_')}}.png" alt="" id="pathImg"/>
                                    <h6>{{path.name}}</h6>
                                </label>
                            </div>
                    </div>
                </div>
            </div>  
        </div>
    </div> 
    <a class="left carousel-control" data-target="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" data-target="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

index.html (jQuery Script)

<script type='text/javascript'>
$(window).load(function(){
$('#myCarousel input:radio').addClass('input_hidden');
$('#myCarousel input:image').click(function() {
    $('#myCarousel input:image').removeClass('selected');   
$(this).addClass('selected');

});

});

Hi all,

I took @rGil advice and my above error was amended. However I am facing a minor bug now. I post my code below.

$scope.addColor=function(){
    $('#myCarousel input:radio').addClass('input_hidden');
    $('#myCarousel input:image').click(function() {
      $('#myCarousel input:image').removeClass('selected');   
      $(this).addClass('selected');

    });
  }

Above JS code, works fine from second selection of the image onward. But failed to work on first click. I was unsure what exactly preventing it! I greatly appreciate everyone contribution. As long as it kept my hope and fire to go-forth in my learning journey.

Once again Thanks in advance.

Shaik
  • 21
  • 4
  • jQuery will only add that behaviour when the window loads. Once the DOM changes, it won't work. Why don't you add a ng-click event to the image as well? – Andrew Dyster May 31 '13 at 11:47
  • ^^^^^ That, and you can set a truthy with the `ng-click` that would prompt an `ng-class` to switch your classes out. – rGil May 31 '13 at 11:48
  • I think [this answer](http://stackoverflow.com/questions/14247598/angularjs-change-class-on-list-when-clicked) does exactly what you want. – rGil May 31 '13 at 11:51
  • @rGil, thanks for your advice on ng-click. I took your words and surprisingly it worked for me! Once again Thank You! – Shaik Jun 03 '13 at 07:44

0 Answers0