CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Hello
Hello

Reputation: 95

Getting an element by another element in angularjs

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?

Upvotes: 2

Views: 87

Answers (3)

simon
simon

Reputation: 1485

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";

    };
}]);

Upvotes: 2

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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

Upvotes: 5

user1537766
user1537766

Reputation: 162

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).

Upvotes: 2

Related Questions