快捷導(dǎo)航

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í)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
這篇文章主要介紹了AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能,結(jié)合實(shí)例形式分析了AngularJS自定義插件的實(shí)現(xiàn)步驟與相關(guān)功能技巧,需要的朋友可以參考下
2016-11-11
Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項(xiàng)目詳解
Angular4.0來(lái)了，更小，更快，改動(dòng)少，所以下面這篇文章主要給大家介紹了關(guān)于Angular 4環(huán)境準(zhǔn)備與學(xué)會(huì)使用Angular cli創(chuàng)建項(xiàng)目的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
AngularJs 常用的過(guò)濾器
本篇文章主要介紹了AngularJs常用的過(guò)濾器。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-05-05
AngularJS ngModel實(shí)現(xiàn)指令與輸入直接的數(shù)據(jù)通信
這篇文章主要介紹了AngularJS ngModel實(shí)現(xiàn)指令與輸入直接的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下
2016-09-09
AngularJS 霸道的過(guò)濾器小結(jié)
本篇文章主要介紹了AngularJS 霸道的過(guò)濾器小結(jié)，在實(shí)際操作中，我們需要對(duì)統(tǒng)一數(shù)據(jù)源進(jìn)行多次轉(zhuǎn)換，本文詳細(xì)討論有關(guān)過(guò)濾器的用法。
2017-04-04
AngularJS入門(mén)（用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門(mén)（用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出,需要的朋友可以參考下
2016-05-05
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
詳解Angular6學(xué)習(xí)筆記之主從組件
這篇文章主要介紹了詳解Angular6學(xué)習(xí)筆記之主從組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解Angular中的自定義服務(wù)Service、Provider以及Factory
本篇文章主要介紹了詳解Angular中的自定義服務(wù)Service、Provider以及Factory，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
Angular 常用指令實(shí)例總結(jié)整理
這篇文章主要介紹了Angular 常用指令實(shí)例總結(jié)整理的相關(guān)資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下
2016-12-12