i tried to make md-select with search field in ionic 1 but when i click search field md-item suddenly close itself
here my html
<md-input-container md-no-float class="icon-title">
<i class="fa fa-edit"></i>
<md-select name="shuttleagen" required ng-model="travel.shuttleagen" interface="action-sheet" aria-label="md-option" ng-change="update()" style="border-bottom:1px solid #3B3837; width:70%; ">
<md-select-header layout="column" class="demo-select-header">
<md-input-container>
<input ng-model="searchTerm" type="search"
placeholder="Search..."/>
</md-input-container>
</md-select-header>
<md-option value="0" selected="selected">Pilih Agen</md-option>
<md-option ng-repeat="data in travelkd | filter:searchTerm" value="{{data.produk_id}}">{{data.produk_nm}}</md-option>
</md-select>
</md-input-container>
Here my js
var id = $scope.datauser[0].id;
apiService.getAll('travel',id,0,$scope.offset,$scope.limit).success(function(data) {
//console.log(data);
$scope.travelkd = data;
//console.log(data);
}).finally(function() {
$scope.selected = null;
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
$scope.$broadcast('scroll.refreshComplete');
});
//$scope.flightdate = new Date();
Related
Am creating an ember application where am in need of dynamicaly adding a select element which will have options fetched from a server. so the select elements look like this. And instead of having all dropdown boxes predefined i need to add them dynamicaly like on a click of a button like( + add more). like
and each of those drop down boxes should contain the datas that is fetched from the server. plus i need a way to get the datas from those dynamically created select fields.
my .hbs for the current drop down page is..
map.hbs
<center><h4>Map</h4></center>
<container class = "cond">
{{#each this.model.sf as |row|}}
<select class = "sel">
{{#each this.model.sf as |sf|}}
<option value = {{sf.attrname}}>{{sf.attrname}}</option>
{{/each}}
</select><br>
{{/each}}
I tried ember-dynamic-fields but its depracted and I couldnt able to use it.. and all other solutions on web or for ember way older versions.. nothing works on ember 4.6 so could anyone helpout?
Using The Platform's native FormData functionality, demo'd here.
I think we can generate any number of inputs based on input data in the following way:
Store the form's state in some variable
conditionally show further select / inputs based on the properties in that form state.
Code-wise, that'd look like this:
{{#if (dataHasValueFor "fieldName")}}
Show previously hidden field
{{/if}}
And of course the devil is in the implementation details, so, a full working example (with sample data I made up -- we can iterate on this if you want for your specific data set, just leave a comment on this post/answer).
import Component from '#glimmer/component';
import { tracked } from '#glimmer/tracking';
import { on } from '#ember/modifier';
import { get } from '#ember/helper';
// This could be your model data from your route
const DATA = {
fruits: [
'apple', 'banana', 'orange', 'mango',
'watermellon', 'avacado', 'tomato?'
],
veggies: ['cocumber', 'tomato?', 'green bean', 'kale', 'spinach'],
peppers: ['carolina reaper', 'habanero', 'jalapeño']
}
export default class Demo extends Component {
#tracked formData;
get categories() {
return Object.keys(DATA);
}
handleInput = (event) => {
let formData = new FormData(event.currentTarget);
let data = Object.fromEntries(formData.entries());
this.formData = data;
}
handleSubmit = (event) => {
event.preventDefault();
handleInput(event);
}
isSelected = (name, value) => this.formData?.[name] === value;
<template>
<form
{{on 'input' this.handleInput}}
{{on 'submit' this.handleSubmit}}
>
<label>
Food Category<br>
<select name="category" placeholder="Select...">
<option selected disabled>Select a food group</option>
{{#each this.categories as |name|}}
<option
value={{name}}
selected={{this.isSelected "category" name}}
>
{{name}}
</option>
{{/each}}
</select>
</label>
<hr>
{{#let (get this.formData "category") as |selectedCategory|}}
{{#if selectedCategory}}
<label>
{{selectedCategory}}<br>
<select name={{selectedCategory}}>
<option selected disabled>
Select {{selectedCategory}}
</option>
{{#each (get DATA selectedCategory) as |food|}}
<option
value={{food}}
selected={{this.isSelected selectedCategory food}}
>
{{food}}
</option>
{{/each}}
</select>
</label>
{{/if}}
{{/let}}
</form>
<hr>
FormData:
<pre>{{toJson this.formData}}</pre>
</template>
}
const toJson = (input) => JSON.stringify(input, null, 4);
This demo is interactive here, on limber.glimdown.com
Note that the syntax used here is what will be default in the upcoming Polaris Edition of Ember, and is available via ember-template-imports
Update (after comments)
Demo here
I took some liberties with the how the fields are dynamic, because I think this more easily shows the concept asked about in the question: dynamically showing fields in a form.
import Component from '#glimmer/component';
import { tracked } from '#glimmer/tracking';
import { on } from '#ember/modifier';
import { get } from '#ember/helper';
export default class Demo extends Component {
#tracked formData;
handleInput = (event) => {
let formData = new FormData(event.currentTarget);
let data = Object.fromEntries(formData.entries());
this.formData = data;
}
handleSubmit = (event) => {
event.preventDefault();
handleInput(event);
}
<template>
<form
{{on 'input' this.handleInput}}
{{on 'submit' this.handleSubmit}}
>
<div class="grid">
<label>
Name <input type="checkbox" name='hasName'>
</label>
<label>
Email <input type="checkbox" name='hasEmail'>
</label>
<label>
Alias <input type="checkbox" name='hasAlias'>
</label>
<hr>
{{#if (get this.formData 'hasName')}}
<label>
Name
<input type="text" name="name" class="border" />
</label>
{{/if}}
{{#if (get this.formData 'hasEmail')}}
<label>
Email
<input type="email" name="email" class="border" />
</label>
{{/if}}
{{#if (get this.formData 'hasAlias')}}
<label>
Alias
<input type="text" name="alias" class="border" />
</label>
{{/if}}
</div>
</form>
<hr>
FormData:
<pre>{{toJson this.formData}}</pre>
</template>
}
const toJson = (input) => JSON.stringify(input, null, 4);
And... since it seems you have a lot of fields, you may want to go as dynamic as possible:
demo here
which is the following code:
<form
{{on 'input' this.handleInput}}
{{on 'submit' this.handleSubmit}}
>
<div class="grid">
{{#each FIELDS as |field|}}
<label>
{{field}} <input type="checkbox" name='has-{{field}}'>
</label>
{{/each}}
<hr>
{{#each FIELDS as |field|}}
{{#if (get this.formData (concat 'has-' field))}}
<label>
{{field}}
<input type="text" name={{field}} class="border" />
</label>
{{/if}}
{{/each}}
</div>
</form>
I guess Simple js code did the magic of adding and retriving data.. pity of me after finding out.. And for some dynamic ember formdata the previous answer from nullvox helped out.. so here is the code
.hbs
<table class="table">
<th>
<td>Sf</td>
</th>
<th>
<td>Db</td>
</th>
<tbody id = "map">
</tbody>
</table>
<button class = "btn btn-sm btn-primary" type="button" {{action "submit"}}>Submit</button>
<button class = "btn btn-success btn-sm" onclick = {{action "get"}} type="button">Add another</button>
controller code for creating element
#action
get() {
let div = document.getElementById('map');
let tr = document.createElement('tr');
let td = document.createElement('td');
let td2 = document.createElement('td');
var select = document.createElement('select');
select.setAttribute('class', 'sfselect');
div.appendChild(tr);
tr.appendChild(td);
td.appendChild(select);
for (var i = 0; i < sf.length; i++) {
var option = document.createElement('option');
option.value = sf[i];
option.text = sf[i];
select.appendChild(option);
}
var select2 = document.createElement('select');
select2.setAttribute('class', 'dbselect');
tr.appendChild(td2);
td2.appendChild(select2);
for (var i = 0; i < db.length; i++) {
var option = document.createElement('option');
option.value = db[i];
option.text = db[i];
select2.appendChild(option);
}
}
controller code for getting data
#action submit() {
var sfattr = document.querySelectorAll('.sfselect');
var dbattr = document.querySelectorAll('.dbselect');
var sf = [];
var db = [];
console.log(sfattr.length);
let datas;
for (var i = 0; i < sfattr.length; i++) {
sf[i] = sfattr[i].value;
db[i] = dbattr[i].value;
}
let m1 = sf.toString();
let m2 = db.toString();
$.ajax({
url: 'http://localhost:8080/lorduoauth/Map',
method: 'POST',
contentType: 'application/x-www-form-urlencoded',
data: {
m1: m1,
m2: m2,
},
success: function (response) {
console.log(datas);
alert(response);
},
error: function (xhr, status, error) {
var errorMessage = xhr.status + ': ' + xhr.statusText;
alert('error' + errorMessage);
},
});
}
thus the output looks like this
I have an existing form in a Vue 3 project that posts successfully to a Cloud Firestore database.
How do I use change two of the type="text" input fields into tag inputs, using a Tag Input Component like this? Here's a link to it on CodeSandbox
The standalone tutorial is very clear and works fine. What I'm struggling with is how to incorporate that into an existing Vue 3 form and continue posting everything to the Firestore database.
I stripped-away styles and many other input fields from the "base" code below:
<template>
<form #submit.prevent="handleSubmit" >
<h3>What kind of pet?</h3>
<div class="space-y-0">
<select required name="pet_type" id="pet_type" v-model="pet_type">
<option value="">Please select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="wolverine">Wolverine</option>
</select>
</div>
<hr>
<div> <!-- Want to change this into the first tag input -->
<h3>Pros</h3>
<div for="petPros">What are 3 positive things about this pet?</div>
<input type="text" placeholder="separate , with , commas" id="petPros" v-model="petPros">
<label for="petPros">separate , with , commas</label>
</div>
<hr>
<div>
<h3>Cons</h3> <!-- Want to change this into a second tag input -->
<div for="petCons">And what are 3 negative things about this pet?</div>
<input type="text" placeholder="separate , with , commas" id="petPros" v-model="petCons">
<label for="petCons">separate , with , commas</label>
</div>
<hr>
<h3>Privacy</h3>
<div>
<div>
<input type="radio" id="Fullpublic" value="Fullpublic" name="reviewPrivacy" required v-model="reviewPrivacy">
<label class="text-base inline-flex ml-4 align-bottom" for="Fullpublic">Public</label>
</div>
<div>
<input type="radio" id="keepFullyPrivate" value="keepFullyPrivate" name="reviewPrivacy" required v-model="reviewPrivacy">
<label class="text-base inline-flex ml-4 align-bottom" for="keepFullyPrivate">Private</label>
</div>
</div>
<hr>
<button v-if="!isPending" >Submit</button>
<button v-else disabled>Saving...</button>
</form>
</template>
<script>
import { ref } from 'vue'
import useStorage from '#/composables/useStorage'
import useCollection from '#/composables/useCollection'
export default {
setup() {
const { filePath, url, uploadImage } = useStorage()
const { error, addDoc } = useCollection('reviews')
const { user } = getUser()
const router = useRouter()
const pet_type = ref('')
const petPros = ref('')
const petCons = ref('')
const reviewPrivacy = ref('')
const file = ref(null)
const fileError = ref(null)
const isPending = ref(false)
const handleSubmit = async () => {
if (file.value) {
isPending.value = true
await uploadImage(file.value)
const res = await addDoc({
pet_type: pet_type.value,
petPros: petPros.value,
petCons: petCons.value,
reviewPrivacy: reviewPrivacy.value,
userId: user.value.uid,
userName: user.value.displayName,
createdAt: timestamp()
})
isPending.value = false
if (!error.value) {
router.push({ name: 'ReviewDetails', params: { id: res.id }})
}
}
}
// allowed file types
const types = ['image/png', 'image/jpeg']
const handleChange = (e) => {
let selected = e.target.files[0]
console.log(selected)
if (selected && types.includes(selected.type)) {
file.value = selected
fileError.value = null
} else {
file.value = null
fileError.value = 'Please select an image file (png, jpg or jpeg)'
}
}
return { pet_type, petPros, petCons, reviewPrivacy, handleSubmit, fileError, handleChange, isPending }
}
}
</script>
<style>
</style>
Thanks for any help!
In the form, replace the two <input type="text">s with <TagInput>. Keep the v-model the same, as TabInput implements v-model.
<!-- BEFORE -->
<input type="text" placeholder="separate , with , commas" id="petPros" v-model="petPros">
<input type="text" placeholder="separate , with , commas" id="petPros" v-model="petCons">
<!-- AFTER -->
<TagInput id="petPros" v-model="petPros" />
<TagInput id="petCons" v-model="petCons" />
Locally register TagInput.vue in the form component:
import TagInput from "./TagInput.vue";
export default {
components: {
TagInput,
},
}
Change the initial values of petPros and petCons refs to arrays, as the TabInput outputs a string array of the input tag values:
// BEFORE
const petPros = ref('')
const petCons = ref('')
// AFTER
const petPros = ref([])
const petCons = ref([])
TabInput normally adds a tag upon hitting TAB, but your placeholder suggests that you want to use the comma key , instead. To do that, update the modifier in the #keydown binding:
<!-- BEFORE -->
<input v-model="newTag"
#keydown.prevent.tab="addTag(newTag)"
>
<!-- AFTER -->
<input v-model="newTag"
#keydown.prevent.,="addTag(newTag)"
>
demo
I want to make an app which displays some items, so I found the backand template (https://market.ionic.io/starters/backand-simple) and used it. I have about 40 items in my database, but the app only displays the first 20 items.
my controller.js
angular.module('SimpleRESTIonic.controllers', [])
.controller('LoginCtrl', function (Backand, $state, $rootScope, LoginService) {
var login = this;
function signin() {
LoginService.signin(login.email, login.password)
.then(function () {
onLogin();
}, function (error) {
console.log(error)
})
}
function onLogin(){
$rootScope.$broadcast('authorized');
login.email = '';
login.password = '';
$state.go('tab.dashboard');
}
function signout() {
LoginService.signout()
.then(function () {
//$state.go('tab.login');
login.email = '';
login.password = '';
$rootScope.$broadcast('logout');
$state.go($state.current, {}, {reload: true});
})
}
login.signin = signin;
login.signout = signout;
})
.controller('DashboardCtrl', function (ItemsModel, $rootScope) {
var vm = this;
function goToBackand() {
window.location = 'http://docs.backand.com';
}
function getAll() {
ItemsModel.all()
.then(function (result) {
vm.data = result.data.data;
});
}
function clearData(){
vm.data = null;
}
function create(object) {
ItemsModel.create(object)
.then(function (result) {
cancelCreate();
getAll();
});
}
function update(object) {
ItemsModel.update(object.id, object)
.then(function (result) {
cancelEditing();
getAll();
});
}
function deleteObject(id) {
ItemsModel.delete(id)
.then(function (result) {
cancelEditing();
getAll();
});
}
function initCreateForm() {
vm.newObject = {name: '', description: ''};
}
function setEdited(object) {
vm.edited = angular.copy(object);
vm.isEditing = true;
}
function isCurrent(id) {
return vm.edited !== null && vm.edited.id === id;
}
function cancelEditing() {
vm.edited = null;
vm.isEditing = false;
}
function cancelCreate() {
initCreateForm();
vm.isCreating = false;
}
vm.objects = [];
vm.edited = null;
vm.isEditing = false;
vm.isCreating = false;
vm.getAll = getAll;
vm.create = create;
vm.update = update;
vm.delete = deleteObject;
vm.setEdited = setEdited;
vm.isCurrent = isCurrent;
vm.cancelEditing = cancelEditing;
vm.cancelCreate = cancelCreate;
vm.goToBackand = goToBackand;
vm.isAuthorized = false;
$rootScope.$on('authorized', function () {
vm.isAuthorized = true;
getAll();
});
$rootScope.$on('logout', function () {
clearData();
});
if(!vm.isAuthorized){
$rootScope.$broadcast('logout');
}
initCreateForm();
getAll();
});
my services.js
angular.module('SimpleRESTIonic.services', [])
.service('APIInterceptor', function ($rootScope, $q) {
var service = this;
service.responseError = function (response) {
if (response.status === 401) {
$rootScope.$broadcast('unauthorized');
}
return $q.reject(response);
};
})
.service('ItemsModel', function ($http, Backand) {
var service = this,
baseUrl = '/1/objects/',
objectName = 'items/';
function getUrl() {
return Backand.getApiUrl() + baseUrl + objectName;
}
function getUrlForId(id) {
return getUrl() + id;
}
service.all = function () {
return $http.get(getUrl());
};
service.fetch = function (id) {
return $http.get(getUrlForId(id));
};
service.create = function (object) {
return $http.post(getUrl(), object);
};
service.update = function (id, object) {
return $http.put(getUrlForId(id), object);
};
service.delete = function (id) {
return $http.delete(getUrlForId(id));
};
})
.service('LoginService', function (Backand) {
var service = this;
service.signin = function (email, password, appName) {
//call Backand for sign in
return Backand.signin(email, password);
};
service.anonymousLogin= function(){
// don't have to do anything here,
// because we set app token att app.js
}
service.signout = function () {
return Backand.signout();
};
});
my dashboard-tab //which displays the items
<ion-view view-title="Produkte">
<div ng-if="!vm.isCreating && !vm.isEditing">
<ion-content class="padding has-header">
<!-- LIST -->
<div class="bar bar-header bar-balanced">
<span ng-click="vm.isCreating = true"><i class='icon ion-plus-round new-item'> Erstellen</i></span>
</div>
<div class="bar bar-subheader">
<div class="list card" ng-repeat="object in vm.data"
ng-class="{'active':vm.isCurrent(object.id)}">
<div class="item item-icon-right item-icon-left">
<i class="ion-compose icon" ng-click="vm.setEdited(object)"></i>
<h2 class="text-center"><b>{{object.name}}</b></h2>
<i class="icon ion-close-round" ng-click="vm.delete(object.id)"></i>
</div>
<div class="text-center">
{{object.description}}
</div>
<div class="item item-body">
<p style="text-align:center;"><img src="{{object.imgurl}}" style="max-width: 250px; max-height: 250px" /></p>
</div>
<div class="text-center">
{{object.price}} Euro
</div>
</div>
</div>
</ion-content>
</div>
<div ng-if="vm.isCreating">
<ion-content class="padding has-header">
<!-- Erstellen -->
<div class="bar bar-header">
<h2 class="title">Erstelle ein Produkt</h2>
<span ng-click="vm.cancelCreate()" class="cancel-create">Abbruch</span>
</div>
<div class="bar bar-subheader">
<form class="create-form" role="form"
ng-submit="vm.create(vm.newObject)" novalidate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" class="form-control"
ng-model="vm.newObject.name"
placeholder="Gib einen Namen ein">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Beschreibung</span>
<textarea placeholder="Beschreibung" class="form-control"
ng-model="vm.newObject.description"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Preis</span>
<textarea placeholder="Preis" class="form-control"
ng-model="vm.newObject.price"
typeof="float"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Bild</span>
<input type="text" class="form-control"
ng-model="vm.newObject.imgurl"
placeholder="Gib einen Bildlink ein">
</label>
</div>
<button class="button button-block button-balanced" type="submit">Fertig</button>
</form>
</div>
</ion-content>
</div>
<div ng-if="vm.isEditing && !vm.isCreating">
<ion-content class="padding has-header">
<!-- Bearbeiten -->
<div class="bar bar-header bar-secondary">
<h1 class="title">Bearbeiten</h1>
<span ng-click="vm.cancelEditing()" class="cancel-create">Abbrechen</span>
</div>
<div class="bar bar-subheader">
<form class="edit-form" role="form"
ng-submit="vm.update(vm.edited)" novalidate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" class="form-control"
ng-model="vm.edited.name"
placeholder="Gib einen Namen ein">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Beschreibung</span>
<textarea class="form-control"
ng-model="vm.edited.description"
placeholder="Beschreibung"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Preis</span>
<textarea placeholder="Preis" class="form-control"
ng-model="vm.edited.price"
type="float"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Bild</span>
<textarea class="form-control"
ng-model="vm.edited.imgurl"
placeholder="Bildlink"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Auswählen</span>
<textarea class="form-control"
ng-model="vm.edited.check"
placeholder="true" type="boolean"></textarea>
</label>
</div>
<button class="button button-block button-balanced" type="submit">Speichern</button>
</form>
</div>
</ion-content>
</div>
thanks for using Backand! There is a default page size filter that you can modify in your getList() call. It is available in our new SDK - if you update to the latest version of the starter project you downloaded, it should already have the appropriate changes built-in. For reference, our new SDK can be found at https://github.com/backand/vanilla-sdk
Regarding resolving your issue, in order to adjust the page size, you can pass in an additional parameter to the getList function that dynamically changes the number of records you can retrieve. Here's some sample code that matches your use case:
service.all = function () {
params = { pageSize: 100 }; // Changes page size to 100
return Backand.object.getList('items', params);
};
Using the old SDK, you can do something similar by appending the parameters query param to the URL you use to drive your GET request.
I tried these ... none of them worked, any hints pls ...
this.title = 'Diagnostic Tools';
it('should have a title', function() {
browser.driver.get('https://URL');
browser.ignoreSynchronization = true;
browser.driver.findElement(by.id('username')).sendKeys('user');
browser.driver.findElement(by.id('password')).sendKeys('pass123');
browser.driver.findElement(by.name('login')).click();
browser.waitForAngular();
expect(browser.getTitle()).toContain('Diagnostic Tools');
element(by.linkText("TOOLS")).click();
element(by.name('server_ip')).sendKeys('1.1.1.1');
});
});
Tried 3 ways after clicking "TOOLS". Adding sleep btw click & send also didn't help.
element(by.name('server_ip')).sendKeys('1.1.1.1');
element(by.cssContainingText('input[name="server_ip"]')).sendKeys('1.1.1.1');
element(by.css('server_ip')).sendKeys('1.1.1.1');
Input class:
<i><div class="form-group required ng-scope" ng-repeat="(param_key, param_value) in selectedTool.params">
<label class="col-sm-2 control-label ng-binding">IP (s)</label>
<div class="col-sm-4">
<input style="" required="required" pattern="[ ]*((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])(.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])){3})( (25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])(.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])){3})*[ ]*"
class="form-control ng-valid-pattern ng-valid-maxlength ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched"
name="server_ip" ng-model="toolInput[param_key]" ng-required="true" ng-attr-pattern="{{param_value.pattern}}" ng-attr-type="{{param_value.type}}" ng-attr-min="{{param_value.min}}" ng-attr-max="{{param_value.max}}" ng-attr-maxlength="{{param_value.maxlength}}">
</div>
<div class="col-sm-6">
<span class="help-block ng-binding">Can be multiple space separated ips.</span>
</div>
You need to explicitly wait for the element to be visible prior to sending keys:
var EC = protractor.ExpectedConditions;
var serverIP = element(by.name("server_ip"));
browser.wait(EC.visibilityOf(serverIP), 5000);
serverIP.sendKeys("1.1.1.1");
I have a form view with an input text. When I click on this input, another view is opened.
In this view, there are an input search and a list. The list change when I change a text from the input search.
I want when I click one item of the list, this view gets closed and the input text change. But I don't know how I can do that.
Can you help me please?
the input text in my form view:
<div class="select-typeevent">
<ion-item nav-clear menu-close ui-sref="menu.setlocation">
<label class="padding">
Address:
</label>
</ion-item>
</div>
My searchview:
<ion-view view-title="Address" class="content">
<ion-content>
<h1>Address</h1>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input class="border-none" name="txtssearch" type="search" placeholder="Search" ng-model="addresssearch" ng-change="getGeocode(addresssearch)">
</label>
<button class="button button-clear" ng-click="addresssearch='';getGeocode(addresssearch)">
Annuler
</button>
</div>
<div class="list" >
<a ng-repeat="addr in addresslist" class="item" ng-click="setaddress(addr)">
{{addr.address}} {{addr.location}}
</a>
</div>
</ion-content>
</ion-view>
And the js:
'Use Strict';
angular.module('App').controller('setlocationController', function ($scope,$state, $cordovaOauth, $localStorage, $location, $http, $ionicPopup,$firebaseObject,$ionicHistory, Auth, FURL, Utils) {
$scope.getGeocode = function (addresssearch) {
$scope.geodata = {};
$scope.queryResults = {};
$scope.queryError = {};
$http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + addresssearch)
.then(function (_results) {
$scope.addresslist = [];
$scope.queryResults = _results.data.results;
console.log($scope.queryResults);
$scope.queryResults.forEach(function(result) {
$scope.addresslist.push({ 'address': result.formatted_address, 'location': result.geometry.location });
});
},
function error(_error){
$scope.queryError = _error;
})
};
// Here I want when I click one item of the list, this view gets closed and the input text of formview change.
$scope.setaddress = function (addr) {
$scope.setaddress = addr;
$ionicHistory.backView();
}
Why not using an $ionicModal:
$scope.getGeocode = function (addresssearch) {
...
$scope.modal.show();
}
Previously set the modal:
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Where my-modal.html points to the template which shows geocode information.