How to display input content in Angular-JS Tutorial-php.cn

How to display input content in Angular

亚连

Release： 2018-06-15 11:18:25

Original

1593 people have browsed it

This article mainly introduces Angular's method of displaying input content above after clicking a button, involving AngularJS event response and dynamic setting of page element attributes related operating techniques. Friends who need it can refer to the example of this article

Describes how Angular implements the method of displaying input content above after clicking a button. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the running effect first:

The specific code is as follows:

<!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">
<p>
  <ul>
    <li>{{getUser.name}}</li>
    <li>{{getUser.sex}}</li>
    <li>{{getUser.email}}</li>
  </ul>
</p>
<p>
  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>
</p>
</body>
</html>

Copy after login

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

How to use Bus in Vue component communication

##How to use Swiper to implement page image carousel

How to use Swiper to implement pager usage

How to implement automatic numerical increase in JavaScript

The above is the detailed content of How to display input content in Angular. For more information, please follow other related articles on the PHP Chinese website!