Getting an element by another element in angularjs

Question

I have a requirement that when clicking an element(Button) should change another element property. I can do by jquery. But i want to ignore the jquery in my angular project.

In Html,

<input type=password />
<button ngclick="changeToTxt()">Change type password to text</button>

In controller,

app.controller('loginPage', function ($scope) {
   $scope.changeToTxt = function () {
     **// need to get the password element and need to change type = text.....**
   }
});

Is there a way(or different/best way) by doing in controller? or need to write a directive for this?

Kalhan · Accepted Answer · 2014-12-03 06:46:20Z

5

you can keep two inputs to do this

you can try something like this

<input type="password" ng-model="pwd" ng-show="!showText" />
<input type="text" ng-model="pwd" ng-show="showText" />

<button ng-click="showText = !showText ">Change type password to text</button>

here is the working plunker

edited Dec 3, 2014 at 6:46

answered Dec 3, 2014 at 6:40

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

1 Comment

Hello Over a year ago

Nice and best way for this scenario.

simon · Accepted Answer · 2014-12-03 06:48:09Z

2

u can easily change the type dynamically

here is the working code fiddle

<div ng-app="app">
  <div ng-controller="MainController">
    <input type={{test}} />
    <input type="button" value="change" ng-click="changeType()"/>
  </div>
</div>


angular.module('app', []).
  controller('MainController', ['$scope', function ($scope) {
    $scope.test = "text";

     $scope.changeType = function () {
       $scope.test = "password";

    };
}]);

answered Dec 3, 2014 at 6:48

simon

1,48510 silver badges20 bronze badges

4 Comments

user1537766 Over a year ago

Is this cross - browser compatible ? I think it does not work on IE. Have you tried it on different browsers?

simon Over a year ago

yes. i have tested in all platform. it will work in all.

Kalhan Over a year ago

Works in IE9 and above not the below universalwebservices.net/web-programming-resources/javascript/…

Hello Over a year ago

Cool, i want to do like this only. Thanks.

user1537766 · Accepted Answer · 2014-12-03 06:38:23Z

2

You cannot change the input type dynamically.

Have you considered using two buttons , one of type password and other of type text. And you can use the ng-hide property to hide one of them on button click( it's a hack).

answered Dec 3, 2014 at 6:38

user1537766

1627 bronze badges

1 Comment

Hello Over a year ago

Good one. But i thought of passing the element and get that element inside controller scope.(as jquery or javascript direct approach).

Collectives™ on Stack Overflow

Getting an element by another element in angularjs

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related