快捷導(dǎo)航

Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法

更新時(shí)間：2017年12月27日 12:05:58 作者：當(dāng)愛(ài)0201

這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)設(shè)置相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法。分享給大家供大家參考，具體如下：

先來(lái)看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chabaoo.cn Angular顯示輸入內(nèi)容</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>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angular4學(xué)習(xí)筆記之根模塊與Ng模塊
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之根模塊與Ng模塊，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Angular ng-animate和ng-cookies用法詳解
本文講一下Angular中動(dòng)畫(huà)應(yīng)用的部分。這篇文章主要介紹了Angular ng-animate和ng-cookies用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
Angularjs實(shí)現(xiàn)頁(yè)面模板清除的方法
這篇文章主要介紹了Angularjs實(shí)現(xiàn)頁(yè)面模板清除的方法,需要的朋友可以參考下
2018-07-07
使用AngularJS來(lái)實(shí)現(xiàn)HTML頁(yè)面嵌套的方法
這篇文章主要介紹了使用AngularJS來(lái)實(shí)現(xiàn)HTML頁(yè)面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下
2015-06-06
Angular(5.2->6.1)升級(jí)小結(jié)
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級(jí)小結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2018-12-12
Angular中樣式綁定解決方案
這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進(jìn)行樣式的綁定,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
Angular4 組件通訊方法大全(推薦)
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
AngularJS遍歷獲取數(shù)組元素的方法示例
這篇文章主要介紹了AngularJS遍歷獲取數(shù)組元素的方法,涉及AngularJS簡(jiǎn)單的數(shù)組遍歷及元素獲取相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11