欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-03 22:41:38
本文实例讲述了angular实现点击按钮后在上方显示输入内容的方法。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下：

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

先来看看运行效果：

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程序设计有所帮助。

上一篇： hibernate框架学习笔记2：配置文件详解

下一篇： 申克VIA 15：搭载AMD锐龙处理器的长跑运动员

推荐阅读