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 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
JavaScript Date对象使用总结
May 14 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
js实现日历与定时器
Feb 22 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
axios封装与传参示例详解
Oct 18 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP开发注意事项总结
2015/02/04 PHP
php类的定义与继承用法实例
2015/07/07 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
Python 函数基础知识汇总
2018/03/09 Python
用Python逐行分析文件方法
2019/01/28 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python异常处理知识点总结
2019/02/18 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python json读写方式和字典相互转化
2020/04/18 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
小学学雷锋活动总结
2014/04/25 职场文书
普通话宣传标语
2014/06/26 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
毕业横幅标语
2014/10/08 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
工作保证书
2015/01/17 职场文书
物业工程部岗位职责
2015/02/11 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
环保证明
2015/06/23 职场文书
改进工作作风心得体会
2016/01/23 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
MongoDB支持的数据类型
2022/04/11 MongoDB