真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

示例AngularJS 路由應(yīng)用
 

 
首頁
 // 在angular中，用#號后面內(nèi)容作為路由跳轉(zhuǎn)的路徑（因?yàn)樵跒g覽器中#號后面的url是被忽略不計(jì)的，所以只相當(dāng)于瀏覽器處于同一頁面，而
 
電腦
 //angular根據(jù)#號后面的內(nèi)容來動態(tài)更改顯示的內(nèi)容） 
 
打印機(jī)
 
 
其他
 
 
 
  

var myApp = angular.module('myApp',['ngRoute']).config(['$routeProvider', function ($routeProvider) { 
// 首先在模塊中加入那個Route依賴，函數(shù)中引入$routerProvider
 $routeProvider
 .when('/', {template:'this is main page'}) // 根據(jù)提供的when函數(shù)來進(jìn)行相應(yīng)配置
 .when('/computers',{
 template:'this is conputer page'
 })
 .when('/printers', {
 template:'this is printer page'
 .otherwise({redirectTo: '/'});
}]);

 

 
 
 文本提示框
 
 

 
 使用html的提示框
 

 

 使用模板的提示框
 

tooltip可以使用的屬性有：

屬性名 默認(rèn)值 備注
tooltip-animation   true    是否在顯示和隱藏時使用動畫
tooltip-append-to-body  false   是否將提示框放在body的末尾
tooltip-class       加在tooltip上的自定義的類名
tooltip-enable  true    是否啟用
tooltip-is-open false   是否顯示提示框
tooltip-placement   top 提示框的位置?？稍O(shè)置的值包括：top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom
tooltip-popup-close-delay   0   關(guān)閉提示框前的延遲時間
tooltip-popup-delay 0   顯示提示框前的延遲時間
tooltip-trigger mouseenter  顯示提示框的觸發(fā)事件

2. 使用popover

 


 
 文本提示框

 

 
 html提示框

 

 
 模板提示框
 
 

popover的屬性有：

popover-animation   true    是否在顯示和隱藏時使用動畫
popover-append-to-body  false   是否將提示框放在body的末尾
popover-enable  true    是否啟用
popover-is-open false   是否顯示提示框
popover-placement   top 提示框的位置?？稍O(shè)置的值包括：top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom
popover-popup-close-delay   0   關(guān)閉提示框前的延遲時間
popover-popup-delay 0   顯示提示框前的延遲時間
popover-trigger mouseenter  顯示提示框的觸發(fā)事件
popover-title       標(biāo)題

大部分屬性和tooltip也是一樣的，只是沒有popover-class，另外多了個popover-title。

需要注意的一點(diǎn)是，popover的全局配置和tooltip一樣，是使用$uibTooltipProvider來配置的。

全局配置tooltip和popover參照網(wǎng)址 https://www.jb51.net/article/143727.htm

2. 使用uib-datepicker并且封裝成指令

這個插件是datepicker只能獲取日期！不是datetimepicker！還有一個叫timepicker，真納悶為什么angular團(tuán)隊(duì)不把這兩個插件組成一個。。。

因?yàn)轫?xiàng)目用到的第三方庫實(shí)在太多，不愿意再去別的地方再弄一個時間控件，所以就用了angular自帶的這個， 說實(shí)話，很一般。。。

上代碼吧：

指令聲明：

 emms.directive('emmsSingleDatepicker', function() {

 

 return {

 restrict: 'AE',

 replace: false,

 templateUrl: 'directives/single-datepicker/single-datepicker.html',

 scope: {

 dateValue: '=ngModel' //逆向綁定輸入框的值到父作用域的ng-model

 },

 controller: function($scope, $filter) {

 $scope.dateOptions = {

  maxDate: new Date(2099, 12, 30)

 };

  $scope.altInputFormats = ['yyyy-M!-d!'];

  $scope.open = function() {

  $scope.opened = true;

  };

  $scope.transformDate = function() {

  $scope.dateValue = $filter('date')($scope.date, 'yyyy-MM-dd HH:mm:ss');

  };

 }

 }

 });

指令模板：uib-datepicker就在這

調(diào)用：（別忘了引入指令的js文件）

3. uib-tab標(biāo)簽頁

直接在要使用的div或者容器內(nèi)使用

 汽車
 工作車
 可用車輛
 

4. uib-modal 模態(tài)框

前臺調(diào)用：

編輯

打開模態(tài)框的函數(shù)

$scope.openVehicleDetail = function(vehicle) {

 // 彈出確認(rèn)窗口

 var modalInstance = $uibModal.open({

 templateUrl: 'vehicle-detail.html',

 controller: 'VehicleDetailCtrl',

 animation: true,

 resolve: {

  vehicle: vehicle,

  allTypes: function() {

  return $scope.allTypes;

  }

 },

 size: 'lg'

 });

 // 更新頁面內(nèi)容

 modalInstance.result.then(function(response) {

 refreshByCloseStatus(response, $scope.vehicles);

 });

 }

模態(tài)框?qū)?yīng)的controller

emms.controller('VehicleDeleteCtrl', ['$scope', '$uibModalInstance', ,

 function($scope, $uibModalInstance) {

 $scope.confirm = function() {

 judgeDelete(flag, instance);

 $uibModalInstance.close("close");

 }

 $scope.cancel = function() {

 $uibModalInstance.dismiss("cancel");

 }
 }]);

模態(tài)框?qū)?yīng)的html模板

 

 

 保險(xiǎn)信息


 

 
 
 

 保險(xiǎn)車輛 *

 

 

  

  請選擇

  

 

  

 

 保險(xiǎn)日期 *

 

  

 

 保險(xiǎn)公司 *

 

 

 

 保險(xiǎn)類型 *

 

 
 
 

 保險(xiǎn)金額 *

 

 

 

 辦理人 *

 

 

 

 備注 *

 

 

 

 

 

  取消

  提交

 

 

 

 
 

以上就是如何在Angular-ui-中使用BootStrap組件，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。