Home > Developer > Web Develop
Ng-show, Ng-hide, ng-if (control element display hidden, the difference is ng-hide whether to show hidden elements , and ng-if is whether to remove elements );
NG-SRC, Ng-class (add path and class style to the element, use the way note );
ng-checked, ng-selected (Control Form checkbox, Radio's selected state);
Ng-disabled, Ng-submit (ng-disabled: Controls the available state of the form element, ng-submit the event when the form is submitted).
<!DOCTYPE HTML><HTMLLang= "en"Ng-app= "MYAPP"><Head> <MetaCharSet= "UTF-8"> <title>angularjs-Common directives use</title> <Linkrel= "stylesheet"href= "Http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> <style>. IMG-SM{width:72px; } </style> <Scriptsrc= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></Script></Head><Body> <Divclass= "Container"style= "width:600px;"Ng-controller= "Myctrl"> <formname= "F"Ng-submit= "Showinfo (user)"> <H3>Basic information</H3> <Divclass= "Form-group"ng-if= "User.imgshow"> <imgclass= "Img-circle center-block"ng-src= "{{user.imgsrc}}"Ng-class= "{' Img-sm ': User.smicon}"> </Div> <Divclass= "Form-group"> <inputtype= "text"class= "Form-control"placeholder= "User name"Ng-model= "User.uname"Required> </Div> <Divclass= "Form-group"> <inputtype= "Password"class= "Form-control"placeholder= "Password"Ng-model= "USER.PSW"Required> </Div> <Divclass= "Form-group"> <Selectclass= "Form-control"> <optionvalue="">--Please choose--</option> <optionvalue=""ng-selected= "User.position==1">Web Development Engineer</option> <optionvalue=""ng-selected= "user.position==2">Java Development Engineer</option> </Select> </Div> <Divclass= "Form-group">Gender:<labelclass= "Radio-inline"> <inputtype= "Radio"name= "Sex"ng-checked= "user.sex== ' Boy '">male</label> <labelclass= "Radio-inline"> <inputtype= "Radio"name= "Sex"ng-checked= "user.sex== ' Girl '">female</label> </Div> <H3>Hobby</H3> <Divclass= "Form-group"> <labelclass= "Checkbox-inline"> <inputtype= "checkbox"ng-checked= "Hobbycheck (1)">Reading</label> <labelclass= "Checkbox-inline"> <inputtype= "checkbox"ng-checked= "Hobbycheck (2)">Climbing</label> <labelclass= "Checkbox-inline"> <inputtype= "checkbox"ng-checked= "Hobbycheck (3)">Basketball</label> </Div> <Buttontype= "Submit"class= "btn btn-primary btn-block"ng-disabled= "F. $invalid">Registered</Button> </form> </Div>
<script src= "register.js"></script>
</Body></HTML>
iv.. register.js file
varApp = Angular.module (' myApp '), []); App.controller (' Myctrl ',function($scope) {$scope. User={imgshow:true,//whether to show Avatar picturesIMGSRC: ' Images/pic02.jpg ',//Picture PathSmicon:false,//Show small avatar picture StyleUname: ",//User namePSW: ",//PasswordPosition: ' 1 ',//position (default: Web Development engineer)Sex: ' Boy ',//gender (default: male)hobby:[1,2]//Hobbies (Default: 1th, 2 tick) } //Hobby Default Check option$scope. Hobbycheck =function(num) {varischecked =false; for(vari=0; i< $scope. user.hobby.length; i++){ if(num = =$scope. User.hobby[i]) {ischecked=true; Break; } } returnischecked; } //Submit Data$scope. Showinfo =function(U) {console.log (U); Alert (' Registered successfully! ') }})
Angularjs Learning--common form instruction practice
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
