脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular点击按钮后在上方显示输入内容

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

 更新时间：2017年12月27日 12:05:58   作者：当爱0201  
这篇文章主要介绍了Angular实现点击按钮后在上方显示输入内容的方法,涉及AngularJS事件响应及页面元素属性动态设置相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • AngularJS辅助库browserTrigger用法示例

    AngularJS辅助库browserTrigger用法示例

    这篇文章主要介绍了AngularJS辅助库browserTrigger用法,结合实例形式分析了辅助库browserTrigger的功能及单元测试中的使用技巧,需要的朋友可以参考下
    2016-11-11
  • Angular 封装并发布组件的方法示例

    Angular 封装并发布组件的方法示例

    本篇文章主要介绍了Angular 封装并发布组件的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 使用AngularJS对表单提交内容进行验证的操作方法

    使用AngularJS对表单提交内容进行验证的操作方法

    AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。下面通过本文给大家分享使用AngularJS对表单提交内容进行验证的操作方法，需要的的朋友参考下吧
    2017-07-07
  • Angular中使用响应式表单的详细步骤

    Angular中使用响应式表单的详细步骤

    Angular提供了两种处理表单的方式模板驱动表单和响应式表单（也称为模型驱动表单）,使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序
    2024-02-02
  • Angular中的请求拦截的方法

    Angular中的请求拦截的方法

    我们的接口是单独编写的处理的，在实际的开发项目中，有众多的接口，有些需要登陆凭证，有些不需要。一个一个接口处理不妥，我们是否可以考虑对请求进行拦截封装，感兴趣的可以了解一下
    2022-04-04
  • Angular.js基础学习之初始化

    Angular.js基础学习之初始化

    这篇文章主要介绍了Angular.js基础学习之初始化的相关资料，AngularJS 启动有两种方式，一种是绑定初始化，自动加载，另外一种是手动初始化，文中介绍的很详细，需要的朋友可以参考下。
    2017-03-03
  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果，本文通过示例代码详细介绍了实现过程，对大家学习AngularJS具有一定参考借鉴价值，有需要的朋友们可以参考借鉴。
    2016-09-09
  • angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    今天小编就为大家分享一篇angularJs复选框checkbox选中进行ng-show显示隐藏的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • angular $watch 一个变量的变化(实例讲解)

    angular $watch 一个变量的变化(实例讲解)

    下面小编就为大家带来一篇angular $watch 一个变量的变化(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angularjs中date过滤器失效的问题及解决方法

    Angularjs中date过滤器失效的问题及解决方法

    这篇文章主要介绍了Angularjs中date过滤器失效的问题及解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07

最新评论