Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

Commit

Permalink
Merge branch 'master' of github.com:angular-ui/ui-select
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimirc
dimirc committed Mar 9, 2015
2 parents 7650d15 + f0908da commit dab77d7
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 3 deletions.
112 changes: 112 additions & 0 deletions examples/demo-focus.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>

<!--
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
-->
<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
<script>
document.createElement('ui-select');
document.createElement('ui-select-match');
document.createElement('ui-select-choices');
</script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

<!-- ui-select files -->
<script src="../dist/select.js"></script>
<link rel="stylesheet" href="../dist/select.css">

<script src="demo.js"></script>

<!-- Select2 theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">

<!--
Selectize theme
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->

<style>
body {
padding: 15px;
}

.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}

.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>

<body ng-controller="DemoCtrl">

<h3>Feature: Focus</h3>
<hr>

<p>Regular uiSelect</p>
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>

<br>
<br>
<br>

<p>Using <b>uisAutofocus</b> to automatically get focus when loaded</p>
<ui-select autofocus ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>

<br>
<br>
<br>

<p>Using <b>uisFocusOn</b> defining a scope event name to listen</p>
<ui-select focus-on='UiSelectDemo1' ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>

<br>
<br>
<button class='btn' ng-click="setInputFocus()">Set Focus</button>

</body>
</html>
5 changes: 5 additions & 0 deletions src/uiSelectController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,11 @@ uis.controller('uiSelectCtrl',
}
};

ctrl.setFocus = function(){
if (!ctrl.focus && !ctrl.multiple) ctrl.focusser[0].focus();
if (!ctrl.focus && ctrl.multiple) _searchInput[0].focus();
};

ctrl.clear = function($event) {
ctrl.select(undefined);
$event.stopPropagation();
Expand Down
21 changes: 18 additions & 3 deletions src/uiSelectDirective.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
uis.directive('uiSelect',
['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile', '$parse',
function($document, uiSelectConfig, uiSelectMinErr, $compile, $parse) {
['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile', '$parse', '$timeout',
function($document, uiSelectConfig, uiSelectMinErr, $compile, $parse, $timeout) {

return {
restrict: 'EA',
Expand All @@ -15,7 +15,6 @@ uis.directive('uiSelect',

controller: 'uiSelectCtrl',
controllerAs: '$select',

link: function(scope, element, attrs, ctrls, transcludeFn) {
var $select = ctrls[0];
var ngModel = ctrls[1];
Expand Down Expand Up @@ -257,6 +256,22 @@ uis.directive('uiSelect',
}
});

//Automatically gets focus when loaded
if (angular.isDefined(attrs.autofocus)){
$timeout(function(){
$select.setFocus();
});
}

//Gets focus based on scope event name (e.g. focus-on='SomeEventName')
if (angular.isDefined(attrs.focusOn)){
scope.$on(attrs.focusOn, function() {
$timeout(function(){
$select.setFocus();
});
});
}

if ($select.multiple){
scope.$watchCollection(function(){ return ngModel.$modelValue; }, function(newValue, oldValue) {
if (oldValue != newValue)
Expand Down

0 comments on commit dab77d7

Please sign in to comment.