AngularJS 教學 - Bootstrap dropdown directive

本篇用 AngularJS directive 實作了 一個 Bootstrap 的 dropdown (下拉式選單)

我有放在 GitHub、ngmodules.org，也有註冊在 Bower 上

GitHub 連結：https://github.com/AllenFang/angular-bootstrap-dropdown
ngmodules 連結：http://ngmodules.org/modules/angular-bootstrap-dropdown
Bower：可以透過以下指令安裝

$ bower install angular-bootstrap-dropdown --save

詳細的使用介紹可以看 GitHub 的 README.md 文件

之後會加上 multi select 的功能 (有時間的話...)

基本使用方式：
bs-dropdown-display 屬性設定 dropdown 要顯示的文字
bs-dropdown-items 屬性設定 dropdown 選單內的 options
ng-model 設定 dropdown 的預設值
ng-change 當 dropdown 的值變動的時候會呼叫 的 callback function
bs-dropdown-divider 指定 dropdown 的分隔線的位置，例如： bs-dropdown-divider="{{[2,5]}}".


以下為一個簡單的使用範例

	angular.module("demoApp", ['ng.bs.dropdown'])
	.controller("YearController", function($scope){
	$scope.years = [
	"2015",
	"2014",
	"2013",
	"2012",
	"2011",
	"2010"
	];
	$scope.selectYear = $scope.years[2]; //current select item
	/*changeYear function will be called if dropdown change*/
	$scope.changeYear = function(){
	console.log("YearController say... " + $scope.selectYear);
	}
	});

view raw app.js hosted with ❤ by GitHub

	<script src="dist/bsDropdown.min.js"></script>
	//.......
	<div ng-controller="YearController">
	<h4>You select {{selectYear}} ....</h4><br/>
	<div bs-dropdown
	bs-dropdown-display="MyDropDown"
	bs-dropdown-items="years"
	ng-model="selectYear"
	ng-change="changeYear()"></div>
	</div>

view raw index.html hosted with ❤ by GitHub

接下來是一個 Bootstrap dropdown divider 的使用範例

	angular.module("demoApp", ['ng.bs.dropdown'])
	.controller("DividerController", function($scope){
	$scope.actions = [
	"Action",
	"Another action",
	"Something else here",
	"separated link1",
	"Action anain",
	"Nothing else",
	"separated link2"
	];
	$scope.selectAction = null;
	});

view raw app1.js hosted with ❤ by GitHub

	<script src="dist/bsDropdown.min.js"></script>
	//.......
	<div ng-controller="DividerController">
	<div bs-dropdown
	bs-dropdown-display="MyDropDown"
	bs-dropdown-items="actions"
	bs-dropdown-divider="{{[2,5]}}"
	ng-model="selectAction"></div>

view raw index1.html hosted with ❤ by GitHub