Angular實現(xiàn)點擊按鈕后在上方顯示輸入內(nèi)容的方法
更新時間：2017年12月27日 12:05:58 作者：當愛0201
這篇文章主要介紹了Angular實現(xiàn)點擊按鈕后在上方顯示輸入內(nèi)容的方法,涉及AngularJS事件響應及頁面元素屬性動態(tài)設置相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Angular實現(xiàn)點擊按鈕后在上方顯示輸入內(nèi)容的方法。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設計有所幫助。
相關(guān)文章
這篇文章主要介紹了Angular4學習筆記之根模塊與Ng模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Angular ng-animate和ng-cookies用法詳解
本文講一下Angular中動畫應用的部分。這篇文章主要介紹了Angular ng-animate和ng-cookies用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Angularjs實現(xiàn)頁面模板清除的方法,需要的朋友可以參考下2018-07-07
使用AngularJS來實現(xiàn)HTML頁面嵌套的方法
這篇文章主要介紹了使用AngularJS來實現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下2015-06-06
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級小結(jié)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進行樣式的綁定,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴展的、用于提示的指令。具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了AngularJS遍歷獲取數(shù)組元素的方法,涉及AngularJS簡單的數(shù)組遍歷及元素獲取相關(guān)操作技巧,需要的朋友可以參考下2017-11-11