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

Commit a435676

Browse files
dimircdimirc
committed
Merge pull request #134 from angular-ui/feat-asyncsingleproperty
Set match value correctly when binding single property and async choices
2 parents 08fd78c + e7b5c76 commit a435676

File tree

4 files changed

+132
-4
lines changed

4 files changed

+132
-4
lines changed

‎examples/demo-bind-to-single-property-async.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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+
<h4>Single property binding with async data</h4>
67+
<p>Selected: {{personAsync.selected}}</p>
68+
<ui-select ng-model="personAsync.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
69+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name || $select.selected}}</ui-select-match>
70+
<ui-select-choices repeat="person.email as person in peopleAsync | propsFilter: {name: $select.search, age: $select.search}">
71+
<div ng-bind-html="person.name | highlight: $select.search"></div>
72+
<small>
73+
email: {{person.email}}
74+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
75+
</small>
76+
</ui-select-choices>
77+
</ui-select>
78+
<small>Data will be populated in 3 secs</small>
79+
80+
</body>
81+
82+
</html>

‎examples/demo.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ app.filter('propsFilter', function() {
3636
}
3737

3838
return out;
39-
}
39+
};
4040
});
4141

42-
app.controller('DemoCtrl', function($scope, $http) {
42+
app.controller('DemoCtrl', function($scope, $http, $timeout) {
4343
$scope.disabled = undefined;
4444

4545
$scope.enable = function() {
@@ -66,6 +66,24 @@ app.controller('DemoCtrl', function($scope, $http) {
6666

6767
};
6868

69+
$scope.personAsync = {selected : "wladimir@email.com"};
70+
$scope.peopleAsync = [];
71+
72+
$timeout(function(){
73+
$scope.peopleAsync = [
74+
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
75+
{ name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
76+
{ name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
77+
{ name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
78+
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
79+
{ name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
80+
{ name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
81+
{ name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
82+
{ name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
83+
{ name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia' }
84+
];
85+
},3000);
86+
6987
$scope.person = {};
7088
$scope.people = [
7189
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },

‎src/select.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,8 @@
188188
} else {
189189
// Regular case
190190
setItemsFn(items);
191+
ctrl.ngModel.$modelValue = null; //Force scope model value and ngModel value to be out of sync to re-run formatters
192+
191193
}
192194
}
193195

@@ -370,6 +372,8 @@
370372
return inputValue;
371373
});
372374

375+
//Set reference to ngModel from uiSelectCtrl
376+
$select.ngModel = ngModel;
373377

374378
//Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954
375379
var focusser = angular.element("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' aria-haspopup='true' role='button' />");

‎test/select.spec.js

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
'use strict';
22

33
describe('ui-select tests', function() {
4-
var scope, $rootScope, $compile;
4+
var scope, $rootScope, $compile, $timeout;
55

66
beforeEach(module('ngSanitize', 'ui.select'));
7-
beforeEach(inject(function(_$rootScope_, _$compile_) {
7+
beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_) {
88
$rootScope = _$rootScope_;
99
scope = $rootScope.$new();
1010
$compile = _$compile_;
11+
$timeout = _$timeout_;
1112
scope.selection = {}
1213
scope.getGroupLabel = function(person) {
1314
return person.age % 2 ? 'even' : 'odd';
@@ -376,6 +377,29 @@ describe('ui-select tests', function() {
376377
expect(getMatchLabel(el)).toEqual('Samantha');
377378
});
378379

380+
it('should parse the model correctly using property of alias with async choices data', function() {
381+
var el = compileTemplate(
382+
'<ui-select ng-model="selection.selected"> \
383+
<ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
384+
<ui-select-choices repeat="person.name as person in peopleAsync | filter: $select.search"> \
385+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
386+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
387+
</ui-select-choices> \
388+
</ui-select>'
389+
);
390+
$timeout(function() {
391+
scope.peopleAsync = scope.people;
392+
});
393+
394+
scope.selection.selected = 'Samantha';
395+
scope.$digest();
396+
expect(getMatchLabel(el)).toEqual('');
397+
398+
$timeout.flush(); //After choices populated (async), it should show match correctly
399+
expect(getMatchLabel(el)).toEqual('Samantha');
400+
401+
});
402+
379403
//TODO Is this really something we should expect?
380404
it('should parse the model correctly using property of alias but passed whole object', function() {
381405
var el = compileTemplate(

0 commit comments

Comments
 (0)