如何通過顯示/隱藏來驗證Angular中的複選框？

我有Angular設置來禁用提交按鈕，直到選中複選框。我想要的是，當你點擊提交時，出現一條驗證信息，說你必須先檢查「同意」。我不認爲按鈕被禁用會對我有幫助，但我不確定接下來要嘗試什麼。這裏是我的代碼：如何通過顯示/隱藏來驗證Angular中的複選框？

<div ng-app class="test"> 
    <input type="checkbox" id="agree_checkbox" ng-model="checked"> 
    <label for="agree_checkbox">I agree.</label> 

    <div class="validation">You have to agree first.</div> 

    <button type="submit" ng-disabled="!checked">Submit</button> 
</div>

任何人都可以給我一些指導如何做到這一點？ JSFiddle

感謝， K-

來源

2015-05-24 Kapunahele Wong

你可以'NG-show'當'NG-click'事件按鈕&&複選框'完成股利！checked' – tektiv

謝謝@tektiv。我不得不承認，我不確定如何計時。我編輯了我的小提琴，但它不對... –

試試這個方法：

DEMO

<div ng-app class="test" ng-init="valid=true"> 
    <input type="checkbox" id="agree_checkbox" ng-model="checked" > 
    <label for="agree_checkbox">I agree.</label> 

    <div class="validation" ng-if="!valid">You have to agree first.</div> 

    <button type="submit" ng-click="valid=checked">Submit</button> 
</div>

而且不要忘記刪除：

display: none; 
color: #fff;

從您的驗證CSS。

編輯：

如果你想防止被提交的表格：

$scope.submit = function() { 
     if($scope.valid) { 
      console.log('submit form') 
     }   
    }

DEMO 2

來源

2015-05-24 01:55:06

非常感謝，@SaidKholov。這正是我所期待的。正如你所看到的，我仍然在Angular的學習曲線中。太棒了。 :) –

歡迎@KapunaheleWong –

檢查這個演示中，我準備：http://codepen.io/Samuelson/pen/QbKXer 它檢查的複選框狀態使用javascript 。

angular.module('app', []) 
.controller('AppController', function($scope){ 
    $scope.alert = function(index, event){ 
     if(document.getElementById('checkbox').checked) { 
     return; 
    } else { 
     alert("Hey! " + index); 
    } 
    } 
});

來源

2015-05-24 02:17:46 Max

謝謝你的密碼，@Samuelson。我一定會把這個放在口袋裏。 –

如何通過顯示/隱藏來驗證Angular中的複選框？

回答

相關問題