Angular实现点击按钮后在上方显示输入内容的方法


Posted in Javascript onDecember 27, 2017

本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法。分享给大家供大家参考,具体如下:

先来看看运行效果:

Angular实现点击按钮后在上方显示输入内容的方法

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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程序设计有所帮助。

Javascript 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 #Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 #Javascript
简单的Vue异步组件实例Demo
Dec 27 #Javascript
Vue.js组件间的循环引用方法示例
Dec 27 #Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
You might like
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
js数组操作学习总结
2013/11/04 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python3抓取中文网页的方法
2015/07/28 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
小结Python的反射机制
2020/09/28 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
四种会话跟踪技术
2015/05/20 面试题
出国留学介绍信
2014/01/13 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
同学会主持词
2014/03/18 职场文书
家长对学生的评语
2014/04/18 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
机关作风建设心得体会
2014/10/22 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
Python中的变量与常量
2021/11/11 Python