AngularJS - 僅當觸摸並空時才顯示div

我只在輸入字段被觸摸且仍然爲空時才顯示div。AngularJS - 僅當觸摸並空時才顯示div

我試過下面的代碼，但div不會出現。由於某種原因，它無法讀取我認爲的觸摸狀態。

任何想法我做錯了什麼？

<div class="col-xs-12 mainbox" > 
<form name="loginForm"> 
    <div class="spacing"></div> 
     <h5>Please input your data:</h5> 
     <input ng-model="vm.username" type="text" placeholder="Username" class="form-control input-md"> 
     <div class="spacing"> 
      <div class="alert alert-danger" ng-if="!vm.username && vm.username.$touched"> 
       Please put your username! 
      </div> 
     </div> 
     <input id="textinput" name="textinput" type="text" placeholder="Κωδικός" class="form-control input-md"> 
     <div class="spacing"></div> 
     <button id="singlebutton" name="singlebutton" class="btn btn-info btn-sm pull-right">Είσοδος</button> 
</form>

PS。當我刪除$ touch條件時，只有當輸入用戶名爲空時，div才能完美顯示。

來源

2017-05-27 Simos Fasouliotis

你打算用$碰到什麼？爲什麼不嘗試使用ngMouseover或ngMouseup ...或者其中的一些事件......並綁定一個變量，它們中的任何一個變爲true/false，然後在你的ng中使用該變量 - 如果...不確定你是什麼試圖做雖然 – Marko

@Marko只是試圖顯示一個警告當他觸摸輸入字段，但離開它沒有輸入任何東西。 –

是的，但是什麼是'觸摸'事件？如果它只是angularJS的Web應用程序，那就是ngMouseUp ...所以你可以使用綁定一個變量的邏輯，只會改變真/假在該事件 – Marko

您需要的名稱屬性設置爲您輸入的控制來完成你的任務。你也需要訪問$摸象loginForm.userName。$感動

<form name="loginForm"> 
<div class="spacing"></div> 
    <h5>Please input your data:</h5> 
    <input ng-model="vm.username" name="userName" type="text" placeholder="Username" class="form-control input-md"> 
    <div class="spacing"> 
     <div class="alert alert-danger" ng-if="!vm.username && loginForm.userName.$touched"> 
      Please put your username! 
     </div> 
    </div> 
    <input id="textinput" name="textinput" type="text" placeholder="Κωδικός" class="form-control input-md"> 
    <div class="spacing"></div> 
    <button id="singlebutton" name="singlebutton" class="btn btn-info btn-sm pull-right">Είσοδος</button>

希望它可以幫助！

來源

2017-05-27 16:12:09

完美答案，這樣工作。所以你不能使用$ touch和ng-model，但只能使用名稱屬性，對嗎？ –

是的，你是對的。請查看https://docs.angularjs.org/guide/forms瞭解更多詳情。如果你也贊成，這將是非常棒的;） –

您可以在輸入欄中使用ng-focus和ng-blur事件。

看這個pen

來源

2017-05-27 16:10:31 nrgwsth

Yap，那正是我在評論中的意思，只是找出你想使用的鼠標事件 – Marko

這個代碼的問題是當您在鍵入之前單擊內部。只有當您離開該字段並且仍然爲空時，纔會顯示該消息。 –

AngularJS - 僅當觸摸並空時才顯示div

回答

相關問題