<code><!--form.html--></code>
<code><!DOCTYPE html></code>
<code><</code><code>html</code> <code>ng-app</code><code>=</code><code>"firstMoudule"</code> <code>lang</code><code>=</code><code>"zh-CN"</code><code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>'utf-8'</code><code>></code>
<code> </code><code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css"</code><code>></code>
<code> </code><code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"../CSS/style.css"</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"container"</code> <code>ng-controller</code><code>=</code><code>"firstController"</code><code>></code>
<code> </code><code><</code><code>form</code> <code>class</code><code>=</code><code>"form-horizontal"</code> <code>name</code><code>=</code><code>"myForm"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code> <code>ng-class</code><code>=</code><code>"{'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))}"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputUsername"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Username</</code><code>label</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-sm-4"</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>id</code><code>=</code><code>"inputUsername"</code> <code>placeholder</code><code>=</code><code>"Your Username"</code> <code>autocomplete</code><code>=</code><code>"false"</code> <code>ng-required</code><code>=</code><code>"true"</code> <code>ng-model</code><code>=</code><code>"data.username"</code> <code>name</code><code>=</code><code>"username"</code> <code>ng-minlength</code><code>=</code><code>"6"</code> <code>ng-maxlength</code><code>=</code><code>"20"</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required&&myForm.username.$dirty"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-remove"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"(!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength)"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-ok"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code> <code>ng-class</code><code>=</code><code>"{'has-warning':(myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty),'has-success':((!myForm.email.$error.email)&&(!myForm.email.$error.required))}"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputEmail3"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Email</</code><code>label</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"email"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>id</code><code>=</code><code>"inputEmail3"</code> <code>placeholder</code><code>=</code><code>"Your Email"</code> <code>autocomplete</code><code>=</code><code>"false"</code> <code>ng-required</code><code>=</code><code>"true"</code> <code>ng-model</code><code>=</code><code>"data.email"</code> <code>name</code><code>=</code><code>"email"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-remove"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"(!myForm.email.$error.email) && (!myForm.email.$error.required)"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-ok"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code> <code>ng-class</code><code>=</code><code>"{'has-warning':(myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty),'has-success':((!myForm.password.$error.pattern)&&(!myForm.password.$error.required))}"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputPassword"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Password</</code><code>label</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"password"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>id</code><code>=</code><code>"inputPassword"</code> <code>placeholder</code><code>=</code><code>"Your Password"</code> <code>ng-pattern</code><code>=</code><code>"/^\w{6,18}$/"</code> <code>ng-required</code><code>=</code><code>"true"</code> <code>ng-model</code><code>=</code><code>"data.password"</code> <code>name</code><code>=</code><code>"password"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-remove"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"(!myForm.password.$error.pattern)&&(!myForm.password.$error.required)"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-ok"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code> <code>ng-class</code><code>=</code><code>"{'has-warning':(data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty),'has-success':(data.passwordRe===data.password&&(!myForm.passwordRe.$error.required))}"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputPasswordRe"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Repeat Password</</code><code>label</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"password"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>id</code><code>=</code><code>"inputPasswordRe"</code> <code>placeholder</code><code>=</code><code>"Repeat Password"</code> <code>ng-required</code><code>=</code><code>"true"</code> <code>ng-model</code><code>=</code><code>"data.passwordRe"</code> <code>name</code><code>=</code><code>"passwordRe"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-remove"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"data.passwordRe===data.password&&(!myForm.passwordRe.$error.required)"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-ok"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code> <code>ng-class</code><code>=</code><code>"{'has-warning':(myForm.site.$error.url||myForm.site.$error.required&&myForm.site.$dirty),'has-success':((!myForm.site.$error.email)&&(!myForm.site.$error.required))}"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputSite"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Site</</code><code>label</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"url"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>id</code><code>=</code><code>"inputSite"</code> <code>placeholder</code><code>=</code><code>"Your Site"</code> <code>autocomplete</code><code>=</code><code>"false"</code> <code>ng-required</code><code>=</code><code>"true"</code> <code>ng-model</code><code>=</code><code>"data.site"</code> <code>name</code><code>=</code><code>"site"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"myForm.site.$error.email||myForm.site.$error.required&&myForm.site.$dirty"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-remove"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"(!myForm.site.$error.url) && (!myForm.site.$error.required)"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-ok"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code> <code>ng-class</code><code>=</code><code>"{'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))}"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputAge"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Age</</code><code>label</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"number"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>id</code><code>=</code><code>"inputAge"</code> <code>placeholder</code><code>=</code><code>"Your Age"</code> <code>autocomplete</code><code>=</code><code>"false"</code> <code>ng-required</code><code>=</code><code>"true"</code> <code>ng-model</code><code>=</code><code>"data.age"</code> <code>name</code><code>=</code><code>"age"</code> <code>max</code><code>=</code><code>"120"</code> <code>min</code><code>=</code><code>"18"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty)"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-remove"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-show</code><code>=</code><code>"((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))"</code> <code>class</code><code>=</code><code>"col-sm-1 info-block"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-ok"</code><code>></</code><code>span</code><code>></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code><code>></code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputSex"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Sex</</code><code>label</code><code>></code>
<code> </code><code><</code><code>label</code> <code>class</code><code>=</code><code>"radio-inline"</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"1"</code> <code>ng-model</code><code>=</code><code>"data.sex"</code><code>>male</code>
<code> </code><code></</code><code>label</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"0"</code> <code>ng-model</code><code>=</code><code>"data.sex"</code><code>>female</code>
<code> </code><code><</code><code>label</code> <code>for</code><code>=</code><code>"inputHobby"</code> <code>class</code><code>=</code><code>"col-sm-4 control-label"</code><code>>Your Hobby</</code><code>label</code><code>></code>
<code> </code><code><</code><code>label</code> <code>class</code><code>=</code><code>"checkbox-inline"</code> <code>ng-repeat</code><code>=</code><code>"hobby in hobbies"</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>"hobby"</code> <code>value</code><code>=</code><code>"hobby.id"</code> <code>ng-click</code><code>=</code><code>"toggleHobbySelection(hobby.id)"</code> <code>ng-checked</code><code>=</code><code>"hobbyData.hobbies.indexOf(hobby.id)!==-1"</code><code>>`hobby`.`name`</code>
<code> </code><code></</code><code>form</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"</code><code>></</code><code>script</code><code>></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"../JS/controllers.js"</code><code>></</code><code>script</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
<code>/*style.css*/</code>
<code>.container {</code>
<code> </code><code>margin-top</code><code>: </code><code>40px</code><code>;</code>
<code>}</code>
<code>.glyphicon {</code>
<code> </code><code>padding-top</code><code>: </code><code>8px</code><code>;</code>
<code>.glyphicon-remove {</code>
<code> </code><code>color</code><code>: </code><code>red</code><code>;</code>
<code>.glyphicon-ok {</code>
<code> </code><code>color</code><code>: </code><code>green</code><code>;</code>
<code>.info-</code><code>block</code> <code>{</code>
<code> </code><code>padding-left</code><code>: </code><code>0px</code><code>;</code>
<code>// controllers.js</code>
<code>angular.module(</code><code>'firstMoudule'</code><code>, [])</code>
<code> </code><code>.service(</code><code>'hobbyDataService'</code><code>, </code><code>function</code><code>() {</code>
<code> </code><code>return</code> <code>{</code>
<code> </code><code>hobbies: [1, 3]</code>
<code> </code><code>}</code>
<code> </code><code>})</code>
<code> </code><code>.controller(</code><code>'firstController'</code><code>, [</code><code>'$scope'</code><code>, </code><code>'hobbyDataService'</code><code>, </code><code>function</code><code>($scope, hobbyDataService) {</code>
<code> </code><code>$scope.hobbies = [{</code>
<code> </code><code>id: 1,</code>
<code> </code><code>name: </code><code>'coding'</code>
<code> </code><code>}, {</code>
<code> </code><code>id: 2,</code>
<code> </code><code>name: </code><code>'soccer'</code>
<code> </code><code>id: 3,</code>
<code> </code><code>name: </code><code>'reading'</code>
<code> </code><code>id: 4,</code>
<code> </code><code>name: </code><code>'sleeping'</code>
<code> </code><code>}];</code>
<code> </code><code>$scope.hobbyData = hobbyDataService;</code>
<code> </code><code>$scope.toggleHobbySelection = </code><code>function</code><code>(id) {</code>
<code> </code><code>var</code> <code>index = $scope.hobbyData.hobbies.indexOf(id);</code>
<code> </code><code>if</code> <code>(index === -1) {</code>
<code> </code><code>$scope.hobbyData.hobbies.push(id);</code>
<code> </code><code>} </code><code>else</code> <code>{</code>
<code> </code><code>$scope.hobbyData.hobbies.splice(index, 1);</code>
<code> </code><code>}</code>
<code> </code><code>console.log($scope.hobbyData.hobbies);</code>
<code> </code><code>}]);</code>
頁面效果
<a href="http://s3.51cto.com/wyfs02/M00/6F/4C/wKioL1WYDZyzSJhNAAEwjJefuQE608.jpg" target="_blank"></a>
本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1671001，如需轉載請自行聯系原作者
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)