Home > Developer > Web Develop
Implementation of the idea: the step by stage to complete the development, gradually add features:
1. Implement the output Users object.
2. Implement click "Edit" button, display FirstName and LastName in the form, can not be modified.
3. Implement the "New user" and "Edit user" toggle.
4. Implement the "Create new User" button.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>Untitled Document</title>6 <Scriptsrc= "Http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></Script>7 </Head>8 9 <BodyNg-app= "MYAPP"Ng-controller= "Userctl">Ten <Table> One <TR> A <TD></TD><TD>Name</TD><TD>Name</TD> - </TR> - <TRng-repeat= "User in users"> the <TD><Buttontype= "button"Ng-click= "Edituser (user.id)">Edit</Button></TD><TD>{{User.firstname}}</TD><TD>{{User.lastname}}</TD> - </TR> - </Table> - <inputtype= "button"value= "Create New user"Ng-click= "Edituser (' new ')"> + <H3Ng-show= "Edit">New user</H3> - <H3Ng-hide= "Edit">Edit User</H3> + <form> AFirstName<inputtype= "text"name= "Firstnam"Ng-model= "FirstName"ng-disabled= "!edit"><BR> atLastName:<inputtype= "text"name= "LastName"Ng-model= "LastName"ng-disabled= "!edit"><BR> -Password<inputtype= "Password"name= "Passwd1" ><BR> -Repeat Password:<inputtype= "Password"name= "Passwd2" ><BR> - <inputtype= "Submit"> - </form> - <Script> in varapp=Angular.module ("myApp",[]); - App.controller ("Userctl",function($scope) { to $scope. FirstName="'; + $scope. LastName="'; - $scope. Edit=true; the $scope. Users=[{ID:1, FirstName:'John', LastName:'cena'},{id:2, FirstName:'Jeff', LastName:'Chen'},{id:3, FirstName:'Bill', LastName:'Gates'},]; * $scope. Edituser= function(ID) { $ if(ID== 'New'){Panax Notoginseng $scope. Edit=true; - $scope. FirstName="'; the $scope. LastName="'; + A } Else { the $scope. Edit= false; + $scope. FirstName=$scope. Users[id-1].firstname; - $scope. LastName=$scope. Users[id-1].lastname; $ $scope. Passwd1="'; $ $scope. Passwd2="'; - } - }; the }); - </Script>Wuyi </Body> the </HTML>
User Edit New _ANGULARJS implementation
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
