Question

使用Angular，当我使用ng-show切换其可见性时，我试图找到清除div内的用户输入。理想情况下，当满足导致div消失的条件时，它应该从div中删除所有用户选择的数据。任何帮助将不胜感激！

＆＃13;

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="">
  <div>
    <input type="checkbox" ng-model="varA" ng-init="varA=false"> Item 1
  </div>
  <div ng-model="varB" ng-show="varA==false">
    <input type="checkbox"> Item 2
  </div>
</body>

</html>

＆＃13;

Answer 1

在复选框上使用ngChange：

<input type="checkbox" ng-change="checkboxChanged()" ng-model="varA" ng-init="varA=false">

然后在你的控制器中实现checkboxChanged功能：

$scope.checkboxChanged = function() {
   $scope.varB = '';
};

顺便说一下，ngModel仅适用于input，select和textarea。不要将ngModel与div一起使用。

Answer 2

您可以使用我编写的ng-reset-on指令。它可以根据表达式重置所有字段。您需要指定controller，该字段必须包含ng-model。

(function(){
    angular.module("app", ["ng-reset-on"]);
    angular.module("app").controller("AppCtrl", function() {}); 
})();

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdn.rawgit.com/waldirpereira/angular-reset-on/master/dist/angular-reset-on.js"></script>

<body ng-app="app">
  <div ng-controller="AppCtrl">
    <div>
      <input type="checkbox" ng-model="varA" ng-init="varA=false"> Item 1
    </div>
    <div ng-show="varA==false">
      <input type="checkbox" ng-model="varB" ng-reset-on="varA==true"> Item 2
    </div>
  </div>
</body>

</html>

Angular：清除ng-hide上的用户输入

2 个答案: