Home > Article > Web Front-end > How to display input content in Angular
This article mainly introduces Angular's method of displaying input content above after clicking a button, involving AngularJS event response and dynamic setting of page element attributes related operating techniques. Friends who need it can refer to the example of this article
Describes how Angular implements the method of displaying input content above after clicking a button. Share it with everyone for your reference, the details are as follows:
Let’s take a look at the running effect first:
The specific code is as follows:
<!DOCTYPE html> <html lang="en"> <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>
Above I compiled it for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use Bus in Vue component communication
##How to use Swiper to implement page image carousel
How to use Swiper to implement pager usage
How to implement automatic numerical increase in JavaScript
The above is the detailed content of How to display input content in Angular. For more information, please follow other related articles on the PHP Chinese website!