AngularJs的UI組件ui-Bootstrap分享（七）——Buttons和Dropdown

本文轉載自查看原文 2016-07-05 12:47 11207 AngularJs/ ui-bootstrap

在ui-Bootstrap中，Buttons控件和Dropdown控件與form表單中的按鈕和下拉框名字很像，但實際上這兩個控件有新的含義。

先說Buttons，它是一組按鈕，用來實現form表單中的單選框和復選框的功能，樣式上可以自定義，功能也可以擴展，可以替代單選框和復選框。

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ButtonsCtrl', function ($scope) { 12  $scope.singleModel = 1; 13 
14  $scope.radioModel = 'Middle'; 15 
16  $scope.checkModel = { 17  left: false, 18  middle: true, 19  right: false
20  }; 21 
22  $scope.checkResults = []; 23 
24  $scope.$watchCollection('checkModel', function () { 25  $scope.checkResults = []; 26  angular.forEach($scope.checkModel, function (value, key) { 27                     if (value) { 28  $scope.checkResults.push(key); 29  } 30  }); 31  }); 32  }); 33     </script>
34 
35 </head>
36 <body>
37     <div ng-controller="ButtonsCtrl">
38         <h4>復選框</h4>
39         <pre>Results: {{checkResults}}</pre>
40         <div class="btn-group">
41             <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
42             <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
43             <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
44         </div>
45         <h4>單選框</h4>
46         <pre>{{radioModel || 'null'}}</pre>
47         <div class="btn-group">
48             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
49             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
50             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
51         </div>
52     </div>
53 </body>
54 </html>

View Code

buttons控件使用uib-btn-checkbox和uib-btn-radio指令，這兩個指令可以加在<input >上，也可以加在<button>上，甚至可以加在<lable>上。

對於復選框，可以設置btn-checkbox-false和btn-checkbox-true表示復選框未選中和選中時的值（默認是false和true）。

對於單選框，一組單選框需要綁定同一個ng-model，並且使用uib-btn-radio指定單選框選中時的值。

單選框還有兩個可選的屬性：

屬性名	默認值	備注
uncheckable		增加這個屬性表示單選框選中狀態下再次點擊時,單選框變為未選中(單選框變成復選框了)
uib-uncheckable	null	為true時效果等於增加uncheckable屬性

再說Dropdown，從外觀上看似乎是表單控件<select>

但是實際上這個控件的主要功能是做導航菜單，因此在模板中使用button和ul元素的組合來表現菜單項。

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) { 12 
13  }); 14     </script>
15 
16 </head>
17 <body>
18     <div ng-controller="DropdownCtrl">
19         <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一項','第二項','第三項']">
20             <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle >
21                 請選擇 <span class="caret"></span>
22             </button>
23             <ul class="dropdown-menu" uib-dropdown-menu >
24                 <li ng-repeat="item in dropdownItems">
25                     <a href="#">{{item}}</a>
26                 </li>
27                 <li class="divider"></li>
28                 <li ><a href="#">其他</a></li>
29             </ul>
30         </div>
31     </div>
32 </body>
33 </html>

View Code

具體來說，dropdown包括三部分：

1. uib-dropdown 表示當前元素是一個菜單

2. uib-dropdown-toggle 一個展開/收起菜單的按鈕。這是可選的部分。

3. uib-dropdown-menu 表示具體的菜單項

uib-dropdown的屬性有：

屬性名	默認值	備注
auto-close	always	可設置的值有三個： 1 always，點擊菜單后自動關閉 2 disabled，不自動關閉，使用is-open手動控制。 3 outsideClick，點擊Dropdown外部的元素時關閉。
dropdown-append-to	null	將菜單項（ul部分）放在其他DOM元素中，而不是包含在uib-dropdown所在的元素中
dropdown-append-to-body	false	將菜單項（ul部分）放在body末尾，而不是包含在uib-dropdown所在的元素中
is-open	false	菜單是否展開。uib-dropdown-toggle所在的元素點擊時會更改這個值。
keyboard-nav	false	是否允許方向鍵選擇菜單
on-toggle		菜單展開或收起時觸發的方法

uib-dropdown-menu可以使用template-url來自定義菜單項，比如這樣：

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) { 12 
13  }); 14     </script>
15 
16 </head>
17 <body>
18     <div ng-controller="DropdownCtrl">
19         <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一項','第二項','第三項']" >
20             <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
21                 請選擇 <span class="caret"></span>
22             </button>
23             <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html">
24             </ul>
25         </div>
26         <script type="text/ng-template" id="dropdown.html">
27             <ul class="dropdown-menu" uib-dropdown-menu>
28                 <li ng-repeat="item in dropdownItems">
29                     <a href="#">{{item}}</a>
30                 </li>
31                 <li class="divider"></li>
32                 <li><a href="#">其他</a></li>
33             </ul>
34         </script>
35     </div>
36 </body>
37 </html>

View Code

其中這兩個屬性dropdown-append-to和dropdown-append-to-body可以將菜單項放在其他地方，這樣設置其樣式時會非常方便。這個用法和Datepicker Popup控件的datepicker-append-to-body屬性是一樣的。但是dropdown-append-to應該怎樣設置才可以指定菜單項遷移到的元素，還沒有找到正確的方法，這里存疑。

另外，Dropdown還可以更改全局配置uibDropdownConfig，uibDropdownConfig的屬性有：

屬性名	默認值	備注
appendToOpenClass	uib-dropdown-open	當菜單展開並且移至其他dom元素中時所添加的類名
openClass	open	當菜單展開時添加的類名

更改全局配置的代碼：

 1     <script>
 2         angular.module('ui.bootstrap.demo', ['ui.bootstrap'])  3             .config(['uibDropdownConfig', function (uibDropdownConfig) {  4                 uibDropdownConfig.appendToOpenClass = 'class1';  5                 uibDropdownConfig.openClass = 'class2';  6  }])  7             .controller('DropdownCtrl', function ($scope) {  8 
 9  }); 10     </script>

View Code

AngularJs的UI組件ui-Bootstrap分享（一）

AngularJs的UI組件ui-Bootstrap分享（二）——Collapse

AngularJs的UI組件ui-Bootstrap分享（三）——Accordion

AngularJs的UI組件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI組件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI組件ui-Bootstrap分享（六）——Tabs

AngularJs的UI組件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI組件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI組件ui-Bootstrap分享（九）——Alert

AngularJs的UI組件ui-Bootstrap分享（十）——Model

AngularJs的UI組件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI組件ui-Bootstrap分享（十二）——Rating

AngularJs的UI組件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI組件ui-Bootstrap分享（十四）——Carousel

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。