当隐藏输入字段时，如何使ng模型预览数据为空？

Question

当输入字段从复选框中隐藏时，如何使ng模型预览数据为空？ 这是我的代码

<div ng-app="">
<input id="eform_check" name="eform_check" type="checkbox" value="hide_input" onclick="showcheckbox();" >Hide input  

<p>Name : <input id="field" name="data" type="text" ng-model="name" style="inline-block"></p>  

<h1>{{name}}</h1>
<script>
function showcheckbox(){
  if(document.getElementById("eform_check").checked){ 
      document.getElementById('field').style.display =  'none';
      document.getElementById('field').value =  ''; 
    }else{
     document.getElementById('field').style.display =  'inline-block';    
    }
}
</script>

当用户在输入框中输入内容时，它将显示您的输入值。 但是当用户单击复选框时，输入值是destroy，但AngularJS仍然保留这里的值？怎么让它消失，THX

这是小提琴代码，thx Fiddle

Answer 1

使用纯 AngularJS ，您可以在复选框上使用ng-model，该复选框可以在真/假之间切换，例如ng-model="hide_input"。

现在，根据hide_input的值，您可以使用input显示/隐藏DOM中的ng-show控件，更具体地说，使用ng-if隐藏预览。

请注意，ng-show只会将display: none设置为ng-if从DOM中完全删除元素的元素。

＆＃13;

＆＃13;

var app = angular.module("app", []).controller("ctrl", function($scope) {});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input id="eform_check" name="eform_check" type="checkbox" ng-model="hide_input">Hide input

  <p>Name : <input id="field" name="data" type="text" ng-model="name" style="inline-block" ng-show="!hide_input" ng-cloak></p>
  <h1 ng-if="!hide_input">{{name}}</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

借助 ng-model 和 ng-show 的简单组合，完成工作！

<input type="checkbox" ng-model="checked"> Hide input  

<p>Name : <input type="text" ng-show="!checked" ng-model="name"></p>  

<h1 ng-show="!checked">{{name}}</h1>