当ng-hide为真时清除输入ng-model AngularJS

问题描述：

我试图以ng-hide为真的方式设置此<input>，无论ng-model是什么都重置。当ng-hide为真时清除输入ng-model AngularJS

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

所以会有含Active和Terminated绑定到ng-model="account.AccountStatus"的下拉列表。当它是Active时，字段Account Name将在那里有文本。我想要做到这一点，当我切换到Terminated时，该输入字段被隐藏，并且account.AccountName被设置为“”。

答

您可以使用[NG-变化]属性，并在控制器中定义的函数来处理更改事件和复位AccountName如果AccountStatus等于'Terminated'。实施例：

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

答

做

<select ng-model="account.AccountStatus" 
    ng-change="resetAccountName(account.AccountStatus == 'Terminated')"> 
    ....... 
    options goes here 
    ....... 
</select>

然后在你的控制器创建函数resetAccountName这样

$scope.resetAccountName = function(flag){ 
    if(flag == true){ 
     $scope.account.AccountName = ""; 
    } 
}

答

您可以在AccountStatus变量绑定到清除帐户名变量的函数，例如在您的控制器中：

$scope.$watch('AccountStatus', function(status) { 
    if (status == 'Terminated') 
     $scope.AccountName = null; 
})

当ng-hide为真时清除输入ng-model AngularJS

相关推荐