本文实例讲述了angular实现点击按钮后在上方显示输入内容的方法。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!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"> <div> <ul> <li>{{getuser.name}}</li> <li>{{getuser.sex}}</li> <li>{{getuser.email}}</li> </ul> </div> <div> 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> </div> </body> </html>
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论