Home > Article > Backend Development > Detailed example of Angular implementation of displaying input content above after clicking a button
This article mainly introduces Angular's method of displaying input content at the top after clicking a button, involving AngularJS event response and dynamic setting of page element attributes related operating techniques. Friends in need can refer to it. I hope it can help everyone.
Let’s take a look at the running effect first:
##The specific code is as follows:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示输入内容</title> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.provider("User",function(){ var user={ name:"zs", sex:"girl", email:"zs@bawei.com" }; var _getUser=function(){ return user; }; var _setUser=function(name,sex,email){ user.name=name; user.sex=sex; user.email=email; }; this.$get=function(){ return{ getUser:_getUser, setUser:_setUser } } }); myapp.controller("myCtrl",function($scope,User){ $scope.getUser=User.getUser(); $scope.setUser=function(){ User.setUser($scope.name,$scope.sex,$scope.email); } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <p> <ul> <li>{{getUser.name}}</li> <li>{{getUser.sex}}</li> <li>{{getUser.email}}</li> </ul> </p> <p> name:<input type="text" ng-model="name"><br> sex:<input type="text" ng-model="sex"><br/> email:<input type="text" ng-model="email"><br/> <button ng-click="setUser()">按钮</button> </p> </body> </html>Related recommendations:
Use regular expressions Expression verification of the input content on the login page
Enter the content in the input box, and 3 method examples will appear in the corresponding div
div can input content without using input as an input box. Detailed explanation of automatic input style shielding
The above is the detailed content of Detailed example of Angular implementation of displaying input content above after clicking a button. For more information, please follow other related articles on the PHP Chinese website!