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?

Answer 1

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

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

    };
}]);