Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法
更新時間：2017年12月27日 12:05:58 作者：當(dāng)愛0201
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法,涉及AngularJS事件響應(yī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.dbjr.com.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入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼
- Angularjs修改密碼的實(shí)例代碼
- AngularJS前端頁面操作之用戶修改密碼功能示例
- angular仿支付寶密碼框輸入效果
- 在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法
- AngularJs驗(yàn)證重復(fù)密碼的方法(兩種)
- angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
- Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
- AngularJS實(shí)現(xiàn)根據(jù)不同條件顯示不同控件
- AngularJS實(shí)時獲取并顯示密碼的方法
相關(guān)文章
Angular4學(xué)習(xí)筆記之根模塊與Ng模塊
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之根模塊與Ng模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Angular ng-animate和ng-cookies用法詳解
本文講一下Angular中動畫應(yīng)用的部分。這篇文章主要介紹了Angular ng-animate和ng-cookies用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Angularjs實(shí)現(xiàn)頁面模板清除的方法
這篇文章主要介紹了Angularjs實(shí)現(xiàn)頁面模板清除的方法,需要的朋友可以參考下2018-07-07
使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法
這篇文章主要介紹了使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下2015-06-06
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級小結(jié)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進(jìn)行樣式的綁定,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧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à)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了AngularJS遍歷獲取數(shù)組元素的方法,涉及AngularJS簡單的數(shù)組遍歷及元素獲取相關(guān)操作技巧,需要的朋友可以參考下2017-11-11