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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
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
Terran兵种介绍
2020/03/14 星际争霸
第三章 php操作符与控制结构代码
2011/12/30 PHP
php缓冲输出实例分析
2015/01/05 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
全面理解Python中self的用法
2016/06/04 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
django实现日志按日期分割
2020/05/21 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
励志演讲稿范文
2014/04/29 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
高中生逃课检讨书
2014/10/10 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
七年级作文之游记
2019/12/11 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
Springboot中如何自动转JSON输出
2022/06/16 Java/Android