<!--form.html-->
<!DOCTYPE html>
<html ng-app="firstMoudule" lang="zh-CN">
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
<div class="container" ng-controller="firstController">
<form class="form-horizontal" name="myForm">
<div class="form-group" ng-class="{'has-warning':(myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required && myForm.username.$dirty),'has-success':((!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength))}">
<label for="inputUsername" class="col-sm-4 control-label">Your Username</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputUsername" placeholder="Your Username" autocomplete="false" ng-required="true" ng-model="data.username" name="username" ng-minlength="6" ng-maxlength="20">
</div>
<div ng-show="myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required&&myForm.username.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
<div ng-show="(!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
</div>
<div class="form-group" ng-class="{'has-warning':(myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty),'has-success':((!myForm.email.$error.email)&&(!myForm.email.$error.required))}">
<label for="inputEmail3" class="col-sm-4 control-label">Your Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3" placeholder="Your Email" autocomplete="false" ng-required="true" ng-model="data.email" name="email">
</div>
<div ng-show="myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
<div ng-show="(!myForm.email.$error.email) && (!myForm.email.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
</div>
<div class="form-group" ng-class="{'has-warning':(myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty),'has-success':((!myForm.password.$error.pattern)&&(!myForm.password.$error.required))}">
<label for="inputPassword" class="col-sm-4 control-label">Your Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword" placeholder="Your Password" ng-pattern="/^\w{6,18}$/" ng-required="true" ng-model="data.password" name="password">
</div>
<div ng-show="myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
<div ng-show="(!myForm.password.$error.pattern)&&(!myForm.password.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
</div>
<div class="form-group" ng-class="{'has-warning':(data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty),'has-success':(data.passwordRe===data.password&&(!myForm.passwordRe.$error.required))}">
<label for="inputPasswordRe" class="col-sm-4 control-label">Repeat Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPasswordRe" placeholder="Repeat Password" ng-required="true" ng-model="data.passwordRe" name="passwordRe">
</div>
<div ng-show="data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
<div ng-show="data.passwordRe===data.password&&(!myForm.passwordRe.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
</div>
<div class="form-group" ng-class="{'has-warning':(myForm.site.$error.url||myForm.site.$error.required&&myForm.site.$dirty),'has-success':((!myForm.site.$error.email)&&(!myForm.site.$error.required))}">
<label for="inputSite" class="col-sm-4 control-label">Your Site</label>
<div class="col-sm-4">
<input type="url" class="form-control" id="inputSite" placeholder="Your Site" autocomplete="false" ng-required="true" ng-model="data.site" name="site">
</div>
<div ng-show="myForm.site.$error.email||myForm.site.$error.required&&myForm.site.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
<div ng-show="(!myForm.site.$error.url) && (!myForm.site.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
</div>
<div class="form-group" ng-class="{'has-warning':(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty),'has-success':((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))}">
<label for="inputAge" class="col-sm-4 control-label">Your Age</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="inputAge" placeholder="Your Age" autocomplete="false" ng-required="true" ng-model="data.age" name="age" max="120" min="18">
</div>
<div ng-show="(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
<div ng-show="((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
</div>
<div class="form-group">
<label for="inputSex" class="col-sm-4 control-label">Your Sex</label>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="sex" value="1" ng-model="data.sex">male
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="0" ng-model="data.sex">female
</label>
</div>
</div>
<div class="form-group">
<label for="inputHobby" class="col-sm-4 control-label">Your Hobby</label>
<div class="col-sm-4">
<label class="checkbox-inline" ng-repeat="hobby in hobbies">
<input type="checkbox" name="hobby" value="hobby.id" ng-click="toggleHobbySelection(hobby.id)" ng-checked="hobbyData.hobbies.indexOf(hobby.id)!==-1">`hobby`.`name`
</label>
</div>
</div>
</form>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
<script src="../JS/controllers.js"></script>
</body>
</html>/*style.css*/
.container {
margin-top: 40px;
}
.glyphicon {
padding-top: 8px;
}
.glyphicon-remove {
color: red;
}
.glyphicon-ok {
color: green;
}
.info-block {
padding-left: 0px;
}// controllers.js
angular.module('firstMoudule', [])
.service('hobbyDataService', function() {
return {
hobbies: [1, 3]
}
})
.controller('firstController', ['$scope', 'hobbyDataService', function($scope, hobbyDataService) {
$scope.hobbies = [{
id: 1,
name: 'coding'
}, {
id: 2,
name: 'soccer'
}, {
id: 3,
name: 'reading'
}, {
id: 4,
name: 'sleeping'
}];
$scope.hobbyData = hobbyDataService;
$scope.toggleHobbySelection = function(id) {
var index = $scope.hobbyData.hobbies.indexOf(id);
if (index === -1) {
$scope.hobbyData.hobbies.push(id);
} else {
$scope.hobbyData.hobbies.splice(index, 1);
}
console.log($scope.hobbyData.hobbies);
}
}]);頁面效果
