use jquery in angular js function is not working?

Question

I am trying to just write jquery inside angularjs function.but don't know why it is not working?

HTML

<div>
   <span ng-repeat="image in post.postImages" ng-if="$index <= 3" ng-init="image.showDeleteIcon= false" ng-mouseover="image.showDeleteIcon=true" ng-mouseleave="image.showDeleteIcon=false">
   <span ng-if="$index == 3" ng-init="setImgCounter(post.postImages.length,$parent.$index+''+$index)"></span>
   <a id="{{$parent.$index}}{{$index}}" onclick="SetDataGallery(this.id)" ng-href="../upload/post-photos/{{image.attachmentURL}}">
   <img class="img-responsive feed-photo" ng-src="../upload/post-photos/{{image.attachmentURL}}" alt="Photo" style="display:inline;">
   <a href="#" class="imgDelete" ng-if="post.timelineStrore.hasControl" ng-show="image.showDeleteIcon" title="Delete Photo" ng-click="DeletePostAttachment(post.timelineStrore.id, image.postAttachmentId,'image')">
   <i class="fa fa-close"></i>
   </a>
   </a>
   </span>
</div>

JS

$scope.setImgCounter = function (counter,id)
{
    $("#" + id + " img:first-child").css("opacity", "0.5");
}

but its not working?

I also tried using =>

.att('style','opacity:0.5');

i recommend you don't use jq in angular code. so try use $scope.$apply(); after jquery code. — Hadi
– Hadi, Commented Jun 9, 2017 at 6:25
Please people stop using jQuery AND Angular together. Either you do things the jQuery way, OR the Angular way, not both. — Jeremy Thille
– Jeremy Thille, Commented Jun 9, 2017 at 6:25
@JeremyThille is there any way to change css on runtime using angular js? — nayan chowdhury
– nayan chowdhury, Commented Jun 9, 2017 at 6:28
Of course there is. Everything you can do with jQuery, you can also do with Angular. But the Angular way :) Documentation : ngStyle — Jeremy Thille
– Jeremy Thille, Commented Jun 9, 2017 at 6:33

Sravan · Accepted Answer · 2017-06-09 07:01:36Z

1

Better not to use jquery with angular

Here is an angular way to achieve your requirement

Since you are trying to make every first child image as opacity 0.5 the loop always makes every images as first child/

So, you can use ng-style in the image div to apply the opacity.

ng-style="{'opacity': '0.5'}"

<div>
    <span ng-repeat="image in post.postImages" ng-if="$index <= 3" ng-init="image.showDeleteIcon= false" ng-mouseover="image.showDeleteIcon=true" ng-mouseleave="image.showDeleteIcon=false">
        <span ng-if="$index == 3" ng-init="setImgCounter(post.postImages.length,$parent.$index+''+$index)"></span>
        <a id="{{$parent.$index}}{{$index}}" onclick="SetDataGallery(this.id)" ng-href="../upload/post-photos/{{image.attachmentURL}}">
            <img class="img-responsive feed-photo" ng-src="../upload/post-photos/{{image.attachmentURL}}" alt="Photo" style="display:inline;" ng-style="{ 'opacity' : ($index == 3) ? '0.5' : '1' }">
            <a href="#" class="imgDelete" ng-if="post.timelineStrore.hasControl" ng-show="image.showDeleteIcon" title="Delete Photo" ng-click="DeletePostAttachment(post.timelineStrore.id, image.postAttachmentId,'image')">
                <i class="fa fa-close"></i>
            </a>
        </a>
    </span>
</div>

Since the image is the first-child to anchor, it will only apply to image..but not i tag.

Note: If you wanted to apply it only for 3rd index, you can also use condition in ng-style. Angular is so flexible.

ng-style="{ 'opacity' : ($index == 3) ? '0.5' : '1' }"

I think this is your requirement.. pls ask me if any queries.

edited Jun 9, 2017 at 7:01

answered Jun 9, 2017 at 6:43

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nayan chowdhury Over a year ago

cant use because i only need to add opacity when the $index = 3.

Sravan Over a year ago

you can use, check this and updated answer , ng-style="{ 'opacity' : ($index == 3) ? '0.5' : '1' }"

Sravan Over a year ago

Glad to help you. :)

Deepa · Accepted Answer · 2017-06-09 06:36:34Z

Use ng-class for dynamically changing css using angularjs. This will allow you to dynamically set classes.

I assume you have your classes defined in a style-sheet that is loaded into memory.

.white{
    color: #ffffff;
}
.black{
    color: #000000;
}

In your angular controller you can have a variable defined that will hold your class-name. Here I am setting it to apply 'white' by default.

$scope.myClass = "white";

Then in your markup you simply bind that variable to your element with ng-class.

<div ng-class="myClass">....</div>

Now, whenever $scope.myclass changes the appropriate class will be added to the div and the old class will be removed. So, in your controller you'll have something that will trigger a change...

if( some_condition ){
    $scope.myClass = "black";
} else {
    $scope.myClass = "white";
}

Ram_T · Accepted Answer · 2017-06-09 06:42:40Z

0

If there is possibility with angular then don't use JQuery

Do this instead and make sure document.querySelectorAll("#" + id + " img:first-child") this is getting correct element

$scope.setImgCounter = function (counter,id)
{
    angular.element(document.querySelectorAll("#" + id + " img:first-child")).css("opacity", "0.5");
}

edited Jun 9, 2017 at 6:42

answered Jun 9, 2017 at 6:28

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

4 Comments

Ram_T Over a year ago

That is why I said "make sure document.querySelectorAll("#" + id + " img:first-child") is getting correct element". Where you are calling setImgCounter ?

nayan chowdhury Over a year ago

after inspaction ` <a id="33" onclick="SetDataGallery(this.id)" ng-href="../upload/post-photos/16b179d6-6644-484c-b6b1-7e896a68242c.jpeg" href="../upload/post-photos/16b179d6-6644-484c-b6b1-7e896a68242c.jpeg"> <img class="img-responsive feed-photo" ng-src="../upload/post-photos/16b179d6-6644-484c-b6b1-7e896a68242c.jpeg" alt="Photo" style="display:inline;" src="../upload/post-photos/16b179d6-6644-484c-b6b1-7e896a68242c.jpeg"> </a> `

Ram_T Over a year ago

I didn't get you. You mean that is the element you are getting in the console?

nayan chowdhury Over a year ago

copied from inspaction

Collectives™ on Stack Overflow

use jquery in angular js function is not working?

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related