So zeigen Sie Eingabeinhalte in Angular an-js-Tutorial-php.cn

So zeigen Sie Eingabeinhalte in Angular an

亚连

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

Original

1626 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich Angulars Methode zum Anzeigen von Eingabeinhalten oben nach dem Klicken auf eine Schaltfläche vorgestellt, einschließlich der AngularJS-Ereignisreaktion und der dynamischen Einstellung von Seitenelementattributen. Freunde in Not können sich auf das Beispiel dieses Artikels beziehen

Beschreibt, wie Angular die oben genannte Methode zum Anzeigen von Eingabeinhalten nach dem Klicken auf eine Schaltfläche implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt:

<!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>

Nach dem Login kopieren

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Bus in der Vue-Komponentenkommunikation

So verwenden Sie Swiper, um ein Seitenbildkarussell zu implementieren

So verwenden Sie Swiper zum Implementieren der Paginierung

So implementieren Sie die automatische numerische Erhöhung in JavaScript

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Eingabeinhalte in Angular an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!