Clear input ng-model when ng-hide is true AngularJS

Question

I am trying to set up this <input> in a way that when ng-hide is true, whatever in ng-model is reset.

<input type="text" class="form-control" ng-model="account.AccountName" ng-hide="account.AccountStatus == 'Terminated'">

So there will be a dropdown list containing Active and Terminated binded to ng-model="account.AccountStatus". When it's Active, the field Account Name would have text there. I want to make it that when I switch to Terminated, that input field is hidden and account.AccountName is set to "".

Answer 1

You may use [ng-change] attribute and define function in the controller to handle change event and reset AccountName if AccountStatus equals to 'Terminated'. Example:

    <input type="text" class="form-control" ng-model="account.AccountName" ng-hide="account.AccountStatus == 'Terminated'">
    <select ng-change="selectChange()" name="selectState" ng-model="account.AccountStatus">
      <option value="Active">Active</option>
      <option value="Terminated">Terminated</option>
    </select>
    <script>
      angular.module('examleModule', []).controller('exampleController',['$scope', function($scope) {
         $scope.account = {
            AccountStatus: 'Active',
            AccountName: ''
         };

     $scope.selectChange= function() {
        // Reset AccountName if AccountStatus=='Terminated'
        if($scope.account.AccountStatus=='Terminated')
             $scope.account.AccountName = '';      
     };
   }]);
   </script>