Use jquery in angular js function not working?
I am trying to just write jquery inside angularjs function. But don't know why it doesn't work?
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 doesn't work?
I also tried using =>
.att('style','opacity:0.5');
source to share
Better not to use jquery with angular
Here is the angular way to achieve your requirement
Since you are trying to make every first child image
like opacity 0.5
, the loop always makes every image the first child /
So you can use on an image element to apply . ng-style
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 anchored to first-child
, it only applies to the image
.. tag , but not i
.
Note. If you only want to apply it for the 3rd index, you can also use the 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 questions.
source to share
Use ng-class to change css dynamically with angularjs. This will allow you to dynamically set classes .
I am assuming you have classes defined in a stylesheet loaded into memory.
.white{
color: #ffffff;
}
.black{
color: #000000;
}
In your angular controller, you can specify a variable that will contain your class name. Here I set it to apply "white" by default.
$scope.myClass = "white";
Then, in your markup, you simply bind that variable to the element using the ng class.
<div ng-class="myClass">....</div>
Now when the $ scope.myclass variables change, the corresponding class will be added to the div and the old class will be removed. So, in your controller, you will have something that will trigger the change ...
if( some_condition ){
$scope.myClass = "black";
} else {
$scope.myClass = "white";
}
source to share
If possible with angular then don't use JQuery
Do this and make sure you document.querySelectorAll("#" + id + " img:first-child")
get the correct item
$scope.setImgCounter = function (counter,id)
{
angular.element(document.querySelectorAll("#" + id + " img:first-child")).css("opacity", "0.5");
}
source to share