欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例

 更新時間:2017年03月03日 14:27:21   作者:xu1101867009  
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實(shí)例,具有很好的參考價值。下面跟著小編一起來看下吧

效果圖:

代碼如下:

<!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">自動登錄
         </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>

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • Angular中sweetalert彈框的基本使用教程

    Angular中sweetalert彈框的基本使用教程

    這篇文章主要給大家介紹了關(guān)于Angular中sweetalert彈框的基本使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-07-07
  • Angular2.0/4.0 使用Echarts圖表的示例代碼

    Angular2.0/4.0 使用Echarts圖表的示例代碼

    本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解angular路由高亮之RouterLinkActive

    詳解angular路由高亮之RouterLinkActive

    這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • AngularJS實(shí)現(xiàn)星星等級評分功能

    AngularJS實(shí)現(xiàn)星星等級評分功能

    這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級評分功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 深入探究angular2 UI組件之primeNG用法

    深入探究angular2 UI組件之primeNG用法

    本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • angularjs中的e2e測試實(shí)例

    angularjs中的e2e測試實(shí)例

    這篇文章主要介紹了angularjs中的e2e測試實(shí)例,本文使用Protractor來完成e2e測試,需要的朋友可以參考下
    2014-12-12
  • Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例

    Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例

    本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • AngularJS  雙向數(shù)據(jù)綁定詳解簡單實(shí)例

    AngularJS 雙向數(shù)據(jù)綁定詳解簡單實(shí)例

    這篇文章主要介紹了AngularJS 雙向數(shù)據(jù)綁定詳解簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • AngularJS使用ng-options指令實(shí)現(xiàn)下拉框

    AngularJS使用ng-options指令實(shí)現(xiàn)下拉框

    這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果,ng-option指令使用也很簡單,下文具體給大家說明,對angularjs 下拉框知識感興趣的朋友一起看下吧
    2016-08-08
  • Angular 5.0 來了! 有這些大變化

    Angular 5.0 來了! 有這些大變化

    Angular 5.0 來了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化,感興趣的小伙伴們可以參考一下
    2017-11-11

最新評論