diff --git a/src/components/dropdown/demo/index.html b/src/components/dropdown/demo/index.html index eb6e377..33ac648 100644 --- a/src/components/dropdown/demo/index.html +++ b/src/components/dropdown/demo/index.html @@ -24,28 +24,19 @@

Basic usage

This markup:

-        <uif-dropdown ng-model="dropdownValue" >
-            <uif-dropdown-option value="value1">Value 1</uif-dropdown-option>
-            <uif-dropdown-option value="value2">Value 2</uif-dropdown-option>
-            <uif-dropdown-option value="value3">Value 3</uif-dropdown-option>
-            <uif-dropdown-option value="value4">Value 4</uif-dropdown-option>
+        <uif-dropdown ng-model="value">
+            <uif-dropdown-option value="{{key}}" ng-repeat="(key, value) in values" title="{{value}}">{{value}}</uif-dropdown-option>
         </uif-dropdown>
         

-

+

Renders this:
- - Value 1 - Value 2 - Value 3 - Value 4 + + {{value}} - -

-

- dropdownValue: {{dropdownValue}} + Value: {{value}}

diff --git a/src/components/dropdown/demo/index.js b/src/components/dropdown/demo/index.js index a4f7446..7af6687 100644 --- a/src/components/dropdown/demo/index.js +++ b/src/components/dropdown/demo/index.js @@ -4,3 +4,14 @@ var demoApp = angular.module('demoApp', [ 'officeuifabric.core', 'officeuifabric.components.dropdown' ]); + +demoApp.controller('demoController', [ + '$scope', demoController]); + +function demoController($scope) { + $scope.values = { + 'round': 'Round', + 'square': 'Square' + }; + $scope.value = 'round'; +}; \ No newline at end of file diff --git a/src/components/dropdown/dropdownDirective.spec.ts b/src/components/dropdown/dropdownDirective.spec.ts index e8bce64..0f7b31e 100644 --- a/src/components/dropdown/dropdownDirective.spec.ts +++ b/src/components/dropdown/dropdownDirective.spec.ts @@ -148,4 +148,25 @@ dropdown.click(); expect(div.hasClass('is-open')).toBe(false, 'Should be closed as the dropdown is disabled again'); })); + it('should be able to pre-select an option', inject(($compile: Function, $rootScope: ng.IRootScopeService) => { + let $scope: any = $rootScope.$new(); + $scope.options = [ + { text: 'Option 1', value: 'Option1'}, + { text: 'Option 2', value: 'Option2'}, + { text: 'Option 3', value: 'Option3'}, + { text: 'Option 4', value: 'Option4'} + ]; + $scope.selectedValue = 'Option2'; + + let dropdown: JQuery = $compile('' + + '{{option.text}}' + + '')($scope); + $scope.$digest(); + dropdown = jQuery(dropdown[0]); + dropdown.appendTo(document.body); + + let title: JQuery = dropdown.find('span.ms-Dropdown-title'); + expect(title.text()).toBe('Option 2', 'Displayed text should be Option 2'); + })); }); diff --git a/src/components/dropdown/dropdownDirective.ts b/src/components/dropdown/dropdownDirective.ts index 0a16047..d81395d 100644 --- a/src/components/dropdown/dropdownDirective.ts +++ b/src/components/dropdown/dropdownDirective.ts @@ -72,6 +72,10 @@ export class DropdownOptionDirective implements ng.IDirective { dropdownController.setViewValue(instanceElement.find('span').html(), attrs.value, ev); }); }); + let value: string = dropdownController.getViewValue(); + if (value && value === attrs.value) { + dropdownController.setViewValue(attrs.title, attrs.value, null); + } } }