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

Commit 2ad31d8

Browse files
dimircdimirc
committed
Merge pull request #132 from angular-ui/event-on-select
Call function onSelect
2 parents 5a180c3 + b8c5035 commit 2ad31d8

File tree

4 files changed

+133
-2
lines changed

4 files changed

+133
-2
lines changed

‎examples/demo-event-on-select.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<script src="demo.js"></script>
30+
31+
<!-- Select2 theme -->
32+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
33+
34+
<!--
35+
Selectize theme
36+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
37+
-->
38+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
39+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
40+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
41+
42+
<style>
43+
body {
44+
padding: 15px;
45+
}
46+
47+
.select2 > .select2-choice.ui-select-match {
48+
/* Because of the inclusion of Bootstrap */
49+
height: 29px;
50+
}
51+
52+
.selectize-control > .selectize-dropdown {
53+
top: 36px;
54+
}
55+
</style>
56+
</head>
57+
58+
<body ng-controller="DemoCtrl">
59+
<script src="demo.js"></script>
60+
61+
<button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
62+
<button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
63+
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
64+
65+
<h3>Select2 theme</h3>
66+
<p>Selected: {{person.selected}}</p>
67+
<ui-select ng-model="person.selected" theme="select2" on-select="someFunction($item, $model)" ng-disabled="disabled" style="min-width: 300px;">
68+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
69+
<ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
70+
<div ng-bind-html="person.name | highlight: $select.search"></div>
71+
<small>
72+
email: {{person.email}}
73+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
74+
</small>
75+
</ui-select-choices>
76+
</ui-select>
77+
78+
<br>
79+
<br>
80+
<br>
81+
<h1>Event Result</h1>
82+
Called <b>{{counter+0}}</b> times selected
83+
<div>item = {{eventResult.item}}</div>
84+
<div>model = {{eventResult.model}}</div>
85+
</body>
86+
87+
</html>

‎examples/demo.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,12 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
8484
];
8585
},3000);
8686

87+
$scope.counter = 0;
88+
$scope.someFunction = function (item, model){
89+
$scope.counter++;
90+
$scope.eventResult = {item: item, model: model};
91+
};
92+
8793
$scope.person = {};
8894
$scope.people = [
8995
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },

‎src/select.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,15 @@
229229

230230
// When the user clicks on an item inside the dropdown
231231
ctrl.select = function(item) {
232+
233+
var locals = {};
234+
locals[ctrl.parserResult.itemName] = item;
235+
236+
ctrl.onSelectCallback($scope, {
237+
$item: item,
238+
$model: ctrl.parserResult.modelMapper($scope, locals)
239+
});
240+
232241
ctrl.selected = item;
233242
ctrl.close();
234243
// Using a watch instead of $scope.ngModel.$setViewValue(item)
@@ -327,8 +336,8 @@
327336
}])
328337

329338
.directive('uiSelect',
330-
['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile',
331-
function($document, uiSelectConfig, uiSelectMinErr, $compile) {
339+
['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile', '$parse',
340+
function($document, uiSelectConfig, uiSelectMinErr, $compile, $parse) {
332341

333342
return {
334343
restrict: 'EA',
@@ -348,6 +357,8 @@
348357
var $select = ctrls[0];
349358
var ngModel = ctrls[1];
350359

360+
$select.onSelectCallback = $parse(attrs.onSelect);
361+
351362
//From view --> model
352363
ngModel.$parsers.unshift(function (inputValue) {
353364
var locals = {};

‎test/select.spec.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -458,4 +458,31 @@ describe('ui-select tests', function() {
458458
expect(scope.selection.selected).toBe('Samantha');
459459
});
460460

461+
it('should invoke select callback on select', function () {
462+
463+
scope.onSelectFn = function ($item, $model, $label) {
464+
scope.$item = $item;
465+
scope.$model = $model;
466+
};
467+
var el = compileTemplate(
468+
'<ui-select on-select="onSelectFn($item, $model)" ng-model="selection.selected"> \
469+
<ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
470+
<ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
471+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
472+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
473+
</ui-select-choices> \
474+
</ui-select>'
475+
);
476+
477+
expect(scope.$item).toBeFalsy();
478+
expect(scope.$model).toBeFalsy();
479+
480+
clickItem(el, 'Samantha');
481+
expect(scope.selection.selected).toBe('Samantha');
482+
483+
expect(scope.$item).toEqual(scope.people[5]);
484+
expect(scope.$model).toEqual('Samantha');
485+
486+
});
487+
461488
});

0 commit comments

Comments
 (0)