Skip to content

Commit

Permalink
(feat): upgrade to Ionic 1.1.0 and Angular 1.4.3
Browse files Browse the repository at this point in the history
  • Loading branch information
Guy Brand committed Sep 3, 2015
1 parent 9a74e4e commit 43a00b6
Show file tree
Hide file tree
Showing 19 changed files with 836 additions and 742 deletions.
39 changes: 17 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,24 +84,19 @@ ion-autocomplete version | Ionic version
------------------------ | -------------
0.0.2 - 0.1.2 | 1.0.0-beta.14
0.2.0 - 0.2.1 | 1.0.0-rc.3
0.2.2 - latest | 1.0.0
0.2.2 - 0.2.3 | 1.0.0
0.3.0 - latest | 1.1.0

# Usage

To use the `ion-autocomplete` directive in single select mode you need to add the following snippet to your template:
```html
// usage with the element restriction
<ion-autocomplete ng-model="model" />

//usage with the attribute restriction
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" />
```

If you want to use it in multiple select mode you need to add the following snippet to your template:
```html
// usage with the element restriction
<ion-autocomplete ng-model="model" multiple-select="true" />

//usage with the attribute restriction
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" multiple-select="true" />
```
Expand All @@ -125,7 +120,7 @@ $scope.callbackMethod = function (query) {

And set the items method on the directive:
```html
<ion-autocomplete ng-model="model" items-method="callbackMethod(query)" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" items-method="callbackMethod(query)" />
```

You are also able to return a promise from this callback method. For example:
Expand Down Expand Up @@ -184,7 +179,7 @@ The items method returns the following object:

And now you set the following `item-value-key`:
```html
<ion-autocomplete ng-model="model" item-value-key="id" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" item-value-key="id" />
```

Now when the user selects the `Item 1` from the list, then the value of the objects `id` is stored in the `ng-model`. If
Expand All @@ -209,7 +204,7 @@ The `items-method` returns the following object:

And now you set the following `item-view-value-key`:
```html
<ion-autocomplete ng-model="model" item-view-value-key="name" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" item-view-value-key="name" />
```

Now when the user selects the `Item 1` from the list, then the value of the objects `name` is showed in both input fields. If
Expand All @@ -219,7 +214,7 @@ no `item-view-value-key` is passed into the directive, the whole item object wil

You are able to set the `multiple-select` attribute to `true` to enable the multiple select feature. Here an example:
```html
<ion-autocomplete ng-model="model" multiple-select="true" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" multiple-select="true" />
```

Then the user is able to select multiple items out of the returned items and also delete them again. The given `ng-model` is an
Expand All @@ -246,7 +241,7 @@ $scope.clickedMethod = function (callback) {

And pass in the callback method in the directive:
```html
<ion-autocomplete ng-model="model" items-clicked-method="clickedMethod(callback)" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" items-clicked-method="clickedMethod(callback)" />
```

Then you get a callback object with the clicked/selected item and the selected items if you have multiple selected items (see [The `multiple-select`](#the-multiple-select)).
Expand Down Expand Up @@ -274,7 +269,7 @@ $scope.removedMethod = function (callback) {

And pass in the callback method in the directive:
```html
<ion-autocomplete ng-model="model" items-removed-method="removedMethod(callback)" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" items-removed-method="removedMethod(callback)" />
```

Then you get a callback object with the removed item and the selected items if you have multiple selected items (see [The `multiple-select`](#the-multiple-select)).
Expand All @@ -299,7 +294,7 @@ $scope.modelToItemMethod = function (modelValue) {

And set the `model-to-item-method` on the directive:
```html
<ion-autocomplete ng-model="model" model-to-item-method="modelToItemMethod(modelValue)" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" model-to-item-method="modelToItemMethod(modelValue)" />
```

You are also able to return a promise from this callback method. For example:
Expand All @@ -317,7 +312,7 @@ The component id is an attribute on the `ion-autocomplete` component which sets
the callback object of the [`items-clicked-method`](#the-items-clicked-method) and as a second parameter of the [`items-method`](#the-items-method).
Here an example:
```html
<ion-autocomplete ng-model="model" component-id="component1" />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" component-id="component1" />`
```

You are able to set this is on each component if you have multiple components built up in a ng-repeat where you do not want to have multiple `items-method`
Expand All @@ -329,35 +324,35 @@ need to define one callback method and you can distinguish the calls with the `c
You are also able to set the placeholder on the input field and on the search input field if you add the `placeholder`
attribute to the directive:
```html
<ion-autocomplete ng-model="model" placeholder="Enter the query to search for ..." />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" placeholder="Enter the query to search for ..." />`
```

### Cancel button label

You are also able to set the cancel button label (defaults to `Cancel`) if you add the `cancel-label` attribute to the directive:
```html
<ion-autocomplete ng-model="model" cancel-label="Go back" />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" cancel-label="Go back" />`
```

### Select items label

You are also able to set the select items label (defaults to `Select an item...`) if you add the `select-items-label` attribute to the directive:
```html
<ion-autocomplete ng-model="model" select-items-label="Select your items..." />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" select-items-label="Select your items..." />`
```

### Selected items label

You are also able to set the selected items label (defaults to `Selected items:`) if you add the `selected-items-label` attribute to the directive:
```html
<ion-autocomplete ng-model="model" selected-items-label="Selected:" />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" selected-items-label="Selected:" />`
```

### Template url

You are also able to set an own template for the autocomplete component (defaults to `''`) if you add the `template-url` attribute to the directive:
```html
<ion-autocomplete ng-model="model" template-url="templates/template.html" />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" template-url="templates/template.html" />`
```

This way you are able to override the default template (the `searchContainerTemplate` variable [here](https://github.com/guylabs/ion-autocomplete/blob/master/src/ion-autocomplete.js#L75))
Expand Down Expand Up @@ -389,7 +384,7 @@ $scope.templateData = {
```
And now you just need to add the `templateData` attribute on the directive:
```html
<ion-autocomplete ng-model="model" template-data="templateData" />`
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" template-data="templateData" />`
```

Then the expression in your template gets resolved properly.
Expand Down Expand Up @@ -423,7 +418,7 @@ This would be the JSON model returned by the `items-method` and in the next snip
name attribute of the child object:

```html
<ion-autocomplete ng-model="model" item-view-value-key="child.name" />
<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" item-view-value-key="child.name" />
```

# Release notes
Expand Down
18 changes: 18 additions & 0 deletions RELEASENOTES.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
# Release notes of ion-autocomplete

## Version 0.3.0

* Tag: [0.3.0](https://github.com/guylabs/ion-autocomplete/tree/v0.3.0)
* Release: [ion-autocomplete-0.3.0.zip](https://github.com/guylabs/ion-autocomplete/archive/v0.3.0.zip)

### Changes

* Upgraded to Ionic 1.1.0 and Angular 1.4.3.
* Fixed an issue with multiple `ion-autocomplete` directives on one page.
* Prepared for Angular 2.0.
* Upgraded project to use newest libraries.

### Migration notes

* As of version 0.3.0 the component does not support the element restriction anymore, such that you are just able to
use the attribute restriction on all your elements. This means that you need to convert all `<ion-autocomplete ... />`
tags to the following tag: `<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ... />`

## Version 0.2.3

* Tag: [0.2.3](https://github.com/guylabs/ion-autocomplete/tree/v0.2.3)
Expand Down
6 changes: 3 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ion-autocomplete",
"version": "0.2.3",
"version": "0.3.0",
"description": "A configurable Ionic directive for an autocomplete dropdown",
"main": [
"./dist/ion-autocomplete.js",
Expand Down Expand Up @@ -37,7 +37,7 @@
"url": "https://github.com/guylabs/ion-autocomplete.git"
},
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.0.0",
"angular-mocks": "1.3.13"
"ionic": "driftyco/ionic-bower#1.1.0",
"angular-mocks": "1.4.3"
}
}
Loading

0 comments on commit 43a00b6

Please sign in to comment.