AngularJS Advanced Select

Simple List of objects

Selected Language Id : {{ language.id != null || 'none' }}

Code

<div ng-controller="example1">
	<select 
	    ng-model="language.id" 
	    ng-options="language.id as language.name for language in languages"
	    class="languages"
	    placeholder="select a language"
	    vd-advanced>
	</select>
</div>

app.controller('example1', function($scope) {
	$scope.language = { id: null };
	$scope.languages = [
		{ id: 0, name: 'English' }, 
		{ id: 1, name: 'Français' }, 
		{ id: 2, name: 'Italiano' }
	];
})

.languages {
	width: 200px;
}

Simple List of primitives

Selected numer : {{ number || 'none' }}

Code

<div ng-controller="example1">
	<select
	    ng-model="number" 
	    ng-options="number for number in numbers"
	    class="numbers"
	    vd-advanced>
	</select>
</div>

app.controller('example2', function($scope) {
	$scope.number = 0;
	$scope.numbers = [5, 10, 15, 20, 25, 30];
})

.numbers {
	width: 100px;
}

List of remote objects (loaded in 3 seconds)

Selected country id : {{ country.id != null || 'none' }}

Code

<div ng-controller="example3">
	<select
	    ng-model="country.id" 
	    ng-options="country.id as country.name for country in countries"
	    class="countries"
	    vd-advanced>
	</select>
</div>

app.controller('example3', function($scope, $timeout) {
	$scope.country = { id: 1 };
	$scope.countries = [];
	$timeout(function() {
		$scope.countries = [
			{ id: 0, name: 'Belgium' }, 
			{ id: 1, name: 'France' }, 
			{ id: 2, name: 'Luxembourg' }, 
			{ id: 3, name: 'United States' }
		];
	}, 3000);
})

.countries {
	width: 200px;
}

List of grouped objects

Selected language id : {{ language.id != null || 'none' }}

Code

<div ng-controller="example4">
	<select
	    ng-model="language.id" 
	    ng-options="language.id as language.name group by language.group for language in languages"
	    class="languages"
	    vd-advanced>
	</select>
</div>

app.controller('example4', function($scope) {
	$scope.language = { id: null };
	$scope.languages = [
		{ id: 1, name: 'French (BE)', group: 'French' },
		{ id: 2, name: 'French (FR)', group: 'French' },
		{ id: 3, name: 'French (CA)', group: 'French' },
		{ id: 4, name: 'English (US)', group: 'English'},
		{ id: 5, name: 'English (UK)', group: 'English'}
	];
})

.languages {
	width: 200px;
}

Simple List of objects

Selected Language Id : {{ language.id != null || 'none' }}

Code

<div ng-controller="example5">
	<select 
	    ng-model="language.id" 
	    ng-options="language.id as language.name for language in languages"
	    class="languages"
	    placeholder="select a language"
	    disabled="disabled"
	    vd-advanced>
	</select>
</div>

app.controller('example5', function($scope) {
	$scope.language = { id: null };
	$scope.languages = [
		{ id: 0, name: 'English' }, 
		{ id: 1, name: 'Français' }, 
		{ id: 2, name: 'Italiano' }
	];
})

.languages {
	width: 200px;
}

Long list

Selected Year : {{ year || 'none' }}

Code

<div ng-controller="example6">
	<select 
	    ng-model="year" 
	    ng-options="year for year in years"
	    placeholder="Select a year"
	    class="years"
	    vd-advanced>
	</select>
</div>

app.controller('example6', function($scope, $timeout) {
	$scope.year = null;
	$scope.years = [];
	for(var i=1940; i < 2013; i++) {
		$scope.years.push(i);
	}
});

.years {
	width: 100px;
}

Multiple list

Selected languages : {{ selected_languages }}

Code

<div ng-controller="example7">
	<select 
	    ng-model="selected_languages" 
	    ng-options="language.id as language.name for language in languages"
	    placeholder="Select one or more language"
	    class="languages"
	    multiple="true"
	    vd-advanced>
	</select>
</div>

app.controller('example7', function($scope) {
	$scope.selected_languages = [0, 2];
	$scope.languages = [
		{ id: 0, name: 'English' }, 
		{ id: 1, name: 'Français' }, 
		{ id: 2, name: 'Italiano' }
	];
});

.languages {
	width: 200px;
}