0
我有形式與角引導模式，在該模式有一個文本框，並添加電子郵件按鈕，然後默認按鈕模式處於禁用模式，直到您鍵入正確的電子郵件ID，當您鍵入正確的電子郵件ID然後按鈕模式將更改爲啓用模式，然後您可以單擊該按鈕，當點擊按鈕時，它會調用addOrRemove（）方法，以及當您按時輸入按鈕它調用相同的方法，但我希望當我按輸入按鈕它需要檢查文本框是否正確電子郵件ID是否正確，如果正確則繼續否則會顯示錯誤消息。angularjs驗證電子郵件ID按回車按鈕
我的HTML代碼
<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
</head>
<body>
<div >
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<li ng-repeat="item in items " ng-form="subForm">
<input type="text" name="name" ng-model="item.email" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" ng-enter="addOrRemove($index,item.email)"/>
<span ng-show="subForm.name.$error.required" style="color: red">Email required</span>
<span ng-show="subForm.name.$invalid" ng-hide="subForm.name.$error.required" style="color: red">Invalid email</span>
<button ng-disabled="subForm.name.$invalid || subFform.name.$dirty" ng-click="addOrRemove($index,item.email)" >{{item.value}}</button>
expression: {{subForm.name.$invalid}}
</li>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
</div>
</body>
</html>
這是我的JavaScript代碼
var app = angular.module('app', ['ui.bootstrap']);
//var ModalDemoCtrl = function ($scope, $modal, $log) {
app.controller('ModalDemoCtrl',['$scope', '$modal','$log','$rootScope',
function controller($scope, $modal, $log, $rootScope)
{
$scope.open = function (size) {
$scope.val = "";
var modalInstance = $modal.open({
templateUrl: 'myModalContent',
controller: ModalInstanceCtrl,
size: size,
backdrop: 'static',
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {
$scope.check2 = "hllo";
$scope.items = [
{
value: "Add email",
state: "1",
email: ""
}];
$scope.check1;
$scope.addOrRemove = function(indexSelected,rcvEmail)
{//alert($rootScope.email1);
console.log("just check email",rcvEmail);
console.log("length of the object",$scope.items.length);
event.preventDefault();
if($scope.items[indexSelected].state == 1)
{
//console.log($scope.items[indexSelected].state);
$scope.items[indexSelected].value = "Remove email";
$scope.items[indexSelected].state = "0";
$scope.items[indexSelected].email = rcvEmail;
$scope.items.push({value: "Add email", state: "1"});
}
else
{
//console.log($scope.items[indexSelected].state);
//$scope.items.push({value: "Remove email", state: "1"});
$scope.items.splice(indexSelected, 1);
}
};
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
app.directive('ngEnter', function() {
console.log("directive checke");
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function(){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
當我按回車按鈕，它會驗證電子郵件文本如果它正確，那麼它會調用方法，否則會顯示錯誤消息。 – 2014-09-24 08:43:18
@BharathKumar請參閱第46行按Enter進行與按添加電子郵件按鈕完全相同的操作 – sylwester 2014-09-24 08:45:53
好吧，我看到了，但它不會驗證電子郵件在文本框中...當我按Enter鍵時，它應該驗證文本框中的電子郵件ID，但它是不驗證電子郵件和調用方法... – 2014-09-24 08:49:46