入力フィールドがチェックボックスから非表示になっている場合、モデルプレビューデータを空にするにはどうすればいいですか？

Question

入力フィールドがチェックボックスから非表示になっている場合、モデルプレビューデータを空にするにはどうすればよいですか？ここ は私のコードは、ユーザーの入力ボックスに入力何か、それはあなたの入力値が表示されます場合は

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

です。 ユーザーがチェックボックスをクリックすると、入力値は破棄されますが、AngularJSはここでも値を保持していますか？それが消えるようにする方法を、ここでTHX

はフィドルコードは、THX純粋AngularJSを使用して Fiddle

Answer 1

NG-モデルとNG-ショーの単純な組み合わせの助けを取ると、あなたの仕事はやりました！

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

Answer 2

である、あなたは、このような真/偽の間で切り替えますチェックボックスにng-modelを利用することができますng-model="hide_input"。今

、hide_inputの値に応じて、あなたがng-showを使用してDOMからinputコントロールを表示/非表示、より具体的にプレビューを非表示にするng-ifを使用することができます。

ng-showはng-ifが要素をDOMから完全に削除する要素にのみdisplay: noneを設定することに注意してください。

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

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