Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

feat(directive): ng:switch #1958

Closed
wants to merge 4 commits into from
Closed

feat(directive): ng:switch #1958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7df8959
feat(directive): ng:switch
lgalfaso Feb 6, 2013
764cc24
test(ng:switch) : make the test explicit on the usefulness of the fea…
lgalfaso Feb 7, 2013
fdadd4e
style(ng:switch): remove unnecessary reference to the angular object
lgalfaso Feb 7, 2013
7ff5cc7
doc(ng:switch): update the documentation on the new feature
lgalfaso Feb 7, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 26 additions & 15 deletions src/ng/directive/ngSwitch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@
* On child elments add:
*
* * `ngSwitchWhen`: the case statement to match against. If match then this
* case will be displayed.
* * `ngSwitchDefault`: the default case when no other casses match.
* case will be displayed. If the same match appears multiple times, all the
* elements will be displayed.
* * `ngSwitchDefault`: the default case when no other case match. If there
* are multiple default cases, all of them will be displayed when no other
* case match.
*
* @example
<doc:example>
Expand Down Expand Up @@ -68,22 +71,28 @@ var ngSwitchDirective = valueFn({
},
link: function(scope, element, attr, ctrl) {
var watchExpr = attr.ngSwitch || attr.on,
selectedTransclude,
selectedElement,
selectedScope;
selectedTranscludes,
selectedElements,
selectedScopes;

scope.$watch(watchExpr, function ngSwitchWatchAction(value) {
if (selectedElement) {
forEach(selectedScopes, function(selectedScope) {
selectedScope.$destroy();
});
forEach(selectedElements, function(selectedElement) {
selectedElement.remove();
selectedElement = selectedScope = null;
}
if ((selectedTransclude = ctrl.cases['!' + value] || ctrl.cases['?'])) {
});
selectedElements = [];
selectedScopes = [];
if ((selectedTranscludes = ctrl.cases['!' + value] || ctrl.cases['?'])) {
scope.$eval(attr.change);
selectedScope = scope.$new();
selectedTransclude(selectedScope, function(caseElement) {
selectedElement = caseElement;
element.append(caseElement);
forEach(selectedTranscludes, function(selectedTransclude) {
var selectedScope = scope.$new();
selectedScopes.push(selectedScope);
selectedTransclude(selectedScope, function(caseElement) {
selectedElements.push(caseElement);
element.append(caseElement);
});
});
}
});
Expand All @@ -96,7 +105,8 @@ var ngSwitchWhenDirective = ngDirective({
require: '^ngSwitch',
compile: function(element, attrs, transclude) {
return function(scope, element, attr, ctrl) {
ctrl.cases['!' + attrs.ngSwitchWhen] = transclude;
ctrl.cases['!' + attrs.ngSwitchWhen] = (ctrl.cases['!' + attrs.ngSwitchWhen] || []);
ctrl.cases['!' + attrs.ngSwitchWhen].push(transclude);
};
}
});
Expand All @@ -107,7 +117,8 @@ var ngSwitchDefaultDirective = ngDirective({
require: '^ngSwitch',
compile: function(element, attrs, transclude) {
return function(scope, element, attr, ctrl) {
ctrl.cases['?'] = transclude;
ctrl.cases['?'] = (ctrl.cases['?'] || []);
ctrl.cases['?'].push(transclude);
};
}
});
40 changes: 40 additions & 0 deletions test/ng/directive/ngSwitchSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,32 @@ describe('ngSwitch', function() {
expect(element.text()).toEqual('true:misko');
}));

it('should switch show all the options that match the switch-when', inject(function($rootScope, $compile) {
element = $compile(
'<ul ng-switch="select">' +
'<li ng-switch-when="1">first:{{name}}</li>' +
'<li ng-switch-when="1">, first too:{{name}}</li>' +
'<li ng-switch-when="2">second:{{name}}</li>' +
'<li ng-switch-when="true">true:{{name}}</li>' +
'</ul>')($rootScope);
expect(element.html()).toEqual(
'<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->');
$rootScope.select = 1;
$rootScope.$apply();
expect(element.text()).toEqual('first:, first too:');
$rootScope.name="shyam";
$rootScope.$apply();
expect(element.text()).toEqual('first:shyam, first too:shyam');
$rootScope.select = 2;
$rootScope.$apply();
expect(element.text()).toEqual('second:shyam');
$rootScope.name = 'misko';
$rootScope.$apply();
expect(element.text()).toEqual('second:misko');
$rootScope.select = true;
$rootScope.$apply();
expect(element.text()).toEqual('true:misko');
}));

it('should switch on switch-when-default', inject(function($rootScope, $compile) {
element = $compile(
Expand All @@ -49,6 +75,20 @@ describe('ngSwitch', function() {
expect(element.text()).toEqual('one');
}));

it('should show all switch-when-default', inject(function($rootScope, $compile) {
element = $compile(
'<ul ng-switch="select">' +
'<li ng-switch-when="1">one</li>' +
'<li ng-switch-default>other</li>' +
'<li ng-switch-default>, other too</li>' +
'</ul>')($rootScope);
$rootScope.$apply();
expect(element.text()).toEqual('other, other too');
$rootScope.select = 1;
$rootScope.$apply();
expect(element.text()).toEqual('one');
}));


it('should call change on switch', inject(function($rootScope, $compile) {
element = $compile(
Expand Down