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

Home

Web Front-end

JS Tutorial

How to display input content in Angular

Jun 15, 2018 am 11:18 AM

angular click button

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:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;www.jb51.net Angular显示输入内容&lt;/title&gt;
  &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    var myapp=angular.module(&quot;myapp&quot;,[]);
    myapp.provider(&quot;User&quot;,function(){
      var user={
        name:&quot;zs&quot;,
        sex:&quot;girl&quot;,
        email:&quot;zs@bawei.com&quot;
      };
      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(&quot;myCtrl&quot;,function($scope,User){
      $scope.getUser=User.getUser();
      $scope.setUser=function(){
        User.setUser($scope.name,$scope.sex,$scope.email);
      }
    })
  &lt;/script&gt;
&lt;/head&gt;
&lt;body ng-app=&quot;myapp&quot; ng-controller=&quot;myCtrl&quot;&gt;
&lt;p&gt;
  &lt;ul&gt;
    &lt;li&gt;{{getUser.name}}&lt;/li&gt;
    &lt;li&gt;{{getUser.sex}}&lt;/li&gt;
    &lt;li&gt;{{getUser.email}}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/p&gt;
&lt;p&gt;
  name:&lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;br&gt;
  sex:&lt;input type=&quot;text&quot; ng-model=&quot;sex&quot;&gt;&lt;br/&gt;
  email:&lt;input type=&quot;text&quot; ng-model=&quot;email&quot;&gt;&lt;br/&gt;
  &lt;button ng-click=&quot;setUser()&quot;&gt;按钮&lt;/button&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn