angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例
更新時(shí)間：2017年03月03日 14:27:21 作者：xu1101867009
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
效果圖：
代碼如下：
<!doctype html>
<html ng-app="UserInfoModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" rel="external nofollow" >
<script src="js/angular-1.3.0.js"></script>
</head>
<body>
<div>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
雙向數(shù)據(jù)綁定
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
<div class="form-group">
<label class="col-md-2 control-label">郵箱：</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="推薦使用126郵箱" ng-model="userInfo.email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">密碼：</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="只能是數(shù)字、字母、下劃線" ng-model="userInfo.password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin">自動(dòng)登錄
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-click="getFormData()">
登錄
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var UserInfoModule = angular.module('UserInfoModule',[]);
UserInfoModule.controller('UserInfoCtrl',['$scope',function($scope){
$scope.userInfo={
email:'1101867009@qq.com',
password:'xu201133016',
autoLogin:true
};
$scope.getFormData=function(){
$scope.userInfo={
email:'1101867009@qq.com',
password:'xu201133016',
autoLogin:true
};
};
$scope.setFormData=function(){
$scope.userInfo={
email:'xu13071061935@163.com',
password:'xu201133016',
autoLogin:false
}
};
}])
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- 理解Angular數(shù)據(jù)雙向綁定
- angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
- 深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機(jī)制
- 實(shí)例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用
- AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例
- Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
- AngularJS入門(mén)教程之?dāng)?shù)據(jù)綁定原理詳解
- 深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
- AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例
- AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Angular中sweetalert彈框的基本使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了angularjs中的e2e測(cè)試實(shí)例,本文使用Protractor來(lái)完成e2e測(cè)試,需要的朋友可以參考下2014-12-12
Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例
本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例
這篇文章主要介紹了AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果，ng-option指令使用也很簡(jiǎn)單，下文具體給大家說(shuō)明，對(duì)angularjs 下拉框知識(shí)感興趣的朋友一起看下吧2016-08-08
Angular 5.0 來(lái)了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化，感興趣的小伙伴們可以參考一下2017-11-11