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