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í)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- 理解Angular數(shù)據(jù)雙向綁定
- angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
- 深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機(jī)制
- 實(shí)例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用
- AngularJS 雙向數(shù)據(jù)綁定詳解簡單實(shí)例
- Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
- AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
- 深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
- AngularJS學(xué)習(xí)筆記(三)數(shù)據(jù)雙向綁定的簡單實(shí)例
- AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
相關(guān)文章
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04AngularJS實(shí)現(xiàn)星星等級評分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級評分功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例
本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10AngularJS 雙向數(shù)據(jù)綁定詳解簡單實(shí)例
這篇文章主要介紹了AngularJS 雙向數(shù)據(jù)綁定詳解簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果,ng-option指令使用也很簡單,下文具體給大家說明,對angularjs 下拉框知識感興趣的朋友一起看下吧2016-08-08