This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(chips): Deprecate md-on-append in favor of others.
The usage of `md-on-append` was not well documented and it's behavior was inconsistent and confusing; many users assumed it was a simple notification of chip additions which caused issues. After much discussion, we have renamed `md-on-append` to `md-transform-chip` and provided a new `md-on-add` method that is strictly a notification. Additionally, we have updated the docs and functionality of `md-transform-chip` to show expected return values and their associated behavior. This new behavior also adds support for simlultaneously using an autocomplete to select an existing value along with the ability to create new chips. The most common case for this is a tag system which shows existing tags, but also allows you to create new ones. Demos have been updated to show new functionality as well as to workaround a few display issues with the contact chips demo (#4450). _**Note:** This work supercedes PR #3816 which can be closed when this is merged._ BREAKING CHANGE: `md-on-append` has been renamed/deprecated in favor of `md-transform-chip` or the simple notifier `md-on-add`. We expect to remove this completely in 1.0, so please update your code to use one of the new methods. Fixes #4666. Fixes #4193. Fixes #4412. Fixes #4863.
- Loading branch information
1 parent
e778cdd
commit 230f176
Showing
11 changed files
with
411 additions
and
25 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
src/components/autocomplete/demoInsideDialog/dialog.tmpl.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<md-dialog aria-label="Autocomplete Dialog Example" ng-cloak> | ||
<md-toolbar> | ||
<div class="md-toolbar-tools"> | ||
<h2>Autocomplete Dialog Example</h2> | ||
<span flex></span> | ||
<md-button class="md-icon-button" ng-click="ctrl.cancel()"> | ||
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon> | ||
</md-button> | ||
</div> | ||
</md-toolbar> | ||
|
||
<md-dialog-content> | ||
<div class="md-dialog-content"> | ||
<form ng-submit="$event.preventDefault()"> | ||
<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p> | ||
<md-autocomplete | ||
md-selected-item="ctrl.selectedItem" | ||
md-search-text="ctrl.searchText" | ||
md-items="item in ctrl.querySearch(ctrl.searchText)" | ||
md-item-text="item.display" | ||
md-min-length="0" | ||
placeholder="What is your favorite US state?"> | ||
<md-item-template> | ||
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span> | ||
</md-item-template> | ||
<md-not-found> | ||
No states matching "{{ctrl.searchText}}" were found. | ||
</md-not-found> | ||
</md-autocomplete> | ||
</form> | ||
</div> | ||
</md-dialog-content> | ||
|
||
<div class="md-actions"> | ||
<md-button aria-label="Finished" ng-click="ctrl.finish($event)">Finished</md-button> | ||
</div> | ||
</md-dialog> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak> | ||
<md-content class="md-padding"> | ||
<p> | ||
Click the button below to open the dialog with an autocomplete. | ||
</p> | ||
|
||
<md-button ng-click="ctrl.openDialog($event)" class="md-raised">Open Dialog</md-button> | ||
</md-content> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
(function () { | ||
'use strict'; | ||
angular | ||
.module('autocompleteDemoInsideDialog', ['ngMaterial']) | ||
.controller('DemoCtrl', DemoCtrl); | ||
|
||
function DemoCtrl($mdDialog) { | ||
var self = this; | ||
|
||
self.openDialog = function($event) { | ||
$mdDialog.show({ | ||
controller: DialogCtrl, | ||
controllerAs: 'ctrl', | ||
templateUrl: 'dialog.tmpl.html', | ||
parent: angular.element(document.body), | ||
targetEvent: $event, | ||
clickOutsideToClose:true | ||
}) | ||
} | ||
} | ||
|
||
function DialogCtrl ($timeout, $q, $scope, $mdDialog) { | ||
var self = this; | ||
|
||
// list of `state` value/display objects | ||
self.states = loadAll(); | ||
self.querySearch = querySearch; | ||
|
||
// ****************************** | ||
// Template methods | ||
// ****************************** | ||
|
||
self.cancel = function($event) { | ||
$mdDialog.cancel(); | ||
}; | ||
self.finish = function($event) { | ||
$mdDialog.hide(); | ||
}; | ||
|
||
// ****************************** | ||
// Internal methods | ||
// ****************************** | ||
|
||
/** | ||
* Search for states... use $timeout to simulate | ||
* remote dataservice call. | ||
*/ | ||
function querySearch (query) { | ||
return query ? self.states.filter( createFilterFor(query) ) : self.states; | ||
} | ||
|
||
/** | ||
* Build `states` list of key/value pairs | ||
*/ | ||
function loadAll() { | ||
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\ | ||
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\ | ||
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\ | ||
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\ | ||
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\ | ||
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\ | ||
Wisconsin, Wyoming'; | ||
|
||
return allStates.split(/, +/g).map( function (state) { | ||
return { | ||
value: state.toLowerCase(), | ||
display: state | ||
}; | ||
}); | ||
} | ||
|
||
/** | ||
* Create filter function for a query string | ||
*/ | ||
function createFilterFor(query) { | ||
var lowercaseQuery = angular.lowercase(query); | ||
|
||
return function filterFn(state) { | ||
return (state.value.indexOf(lowercaseQuery) === 0); | ||
}; | ||
|
||
} | ||
} | ||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.