快捷導(dǎo)航

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

更新時(shí)間：2017年12月27日 12:05:58 作者：當(dāng)愛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)容的方法。分享給大家供大家參考，具體如下：

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

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.fzitv.net 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入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

AngularJS輔助庫(kù)browserTrigger用法示例
這篇文章主要介紹了AngularJS輔助庫(kù)browserTrigger用法,結(jié)合實(shí)例形式分析了輔助庫(kù)browserTrigger的功能及單元測(cè)試中的使用技巧,需要的朋友可以參考下
2016-11-11
Angular 封裝并發(fā)布組件的方法示例
本篇文章主要介紹了Angular 封裝并發(fā)布組件的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧
2017-07-07
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱為模型驅(qū)動(dòng)表單）,使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序
2024-02-02
Angular中的請(qǐng)求攔截的方法
我們的接口是單獨(dú)編寫的處理的，在實(shí)際的開發(fā)項(xiàng)目中，有眾多的接口，有些需要登陸憑證，有些不需要。一個(gè)一個(gè)接口處理不妥，我們是否可以考慮對(duì)請(qǐng)求進(jìn)行攔截封裝，感興趣的可以了解一下
2022-04-04
Angular.js基礎(chǔ)學(xué)習(xí)之初始化
這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料，AngularJS 啟動(dòng)有兩種方式，一種是綁定初始化，自動(dòng)加載，另外一種是手動(dòng)初始化，文中介紹的很詳細(xì)，需要的朋友可以參考下。
2017-03-03
利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果
這篇文章給大家介紹了如何利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖的效果，本文通過示例代碼詳細(xì)介紹了實(shí)現(xiàn)過程，對(duì)大家學(xué)習(xí)AngularJS具有一定參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。
2016-09-09
angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
angular $watch 一個(gè)變量的變化(實(shí)例講解)
下面小編就為大家?guī)硪黄猘ngular $watch 一個(gè)變量的變化(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
Angularjs中date過濾器失效的問題及解決方法
這篇文章主要介紹了Angularjs中date過濾器失效的問題及解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07