Geek Answers Handbook

Disable / hide specific id-based anchor tag in Angular JS

I have some links on my page. Of the many links, I want to disable specific links only based on the value of the database. I saved the anchor tag identifier to the database ID in firebase, so that based on the value, disable the link for that particular identifier.

 <a  id="{{page.$id}}"  ng-href="#/edit/{{page.$id}}/" target="_blank">Add</a>

If I click the button, I will add the code below and it works fine:

<button type="button" class="btn btn-primary" ng-click="complete(page.$id)">Complete</button>

$scope.complete=function(id)
{
   var target=angular.element("a#"+id);
   console.log(target);
   target[0].hidden=true;
   var elem= angular.element(id);
   elem.context.activeElement.disabled=true;
}

Above code console.log returns the following element to me:

[a#-KBp32nu3tfHPpKvlBqW, prevObject: x.fn.x.init[1], context:  document, selector: "a#-KBp32nu3tfHPpKvlBqW"]
 0: a#-KBp32nu3tfHPpKvlBqW
 context: document
 length: 1
 prevObject: x.fn.x.init[1]
 selector: "a#-KBp32nu3tfHPpKvlBqW"
 __proto__: x[0]

Thanks to this, I can get a specific identifier for the anchor tag and the ability to hide this element. However, when I try to apply the same code on the controller to disable / hide the element when the page loads, this function returns the parentDOM element to me. My code on the controller is as follows:

refUpdate=new Firebase("https://databseURL/"+newId);
refUpdate.on('value',function(snapshot){
var status= snapshot.child("completed").val();
if(status=="yes")
{
   var target= angular.element('a#'+newId);
   console.log(target);
}
});

[prevObject: x.fn.x.init[1], context: document, selector:"a#-KBp32nu3tfHPpKvlBqW"]
 context: document
 length: 0
 prevObject: x.fn.x.init[1]
 selector: "a#-KBp32nu3tfHPpKvlBqW"
 __proto__: x[0]

. , ?

+4
1

, values boolean, a, :

<a  id="{{page.$id}}"  ng-href="#/edit/{{page.$id}}/" target="_blank" ng-hide="page.isHide">Add</a>

ng-disabled, disable

+2

More articles:


All Articles