首頁 >web前端 >js教程 >在Angular中如何實現顯示輸入內容

在Angular中如何實現顯示輸入內容

亚连原創: 2018-06-15 11:18:251617瀏覽

這篇文章主要介紹了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">
<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>

上面是我整理給大家的，希望今後對大家有幫助。

在Vue元件通訊中如何使用Bus

使用Swiper如何實作頁面圖片輪播

使用Swiper如何實作分頁器使用

在JavaScript中如何實作數值自動增加

以上是在Angular中如何實現顯示輸入內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript angular 事件

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在專案中如何應用swiper下一篇：在專案中如何應用swiper

看更多