I am trying to set the value of input equal to the item in ion-list based on a click event. The value updates on first click event but is not updating on later clicks
<ion-view view-title="Add Cities">
<ion-content>
<label class="item-input-wrapper bar-subheader">
<i class="icon ion-android-search placeholder-icon"></i>
<input style="width:100%" type="text" placeholder="Search" ng-model="CityName">
</label>
<ion-button class="button ion-plus button-positive" ng-click="addCity(CityName)" >Add</ion-button>
<div class="list">
<ion-list>
<ion-item ng-repeat="item in states|filter:CityName" ng-click="set(item)">
{{item}}
</ion-item>
</ion-list>
</ul>
</div>
</ion-content>
</ion-view>
associated function in controller.js
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
i have checked console the function triggers but the input updates only once
i have tried adding $scope.$apply() in function set but it's still not working. Please suggest edits in the above code or is there a better method to do the same?
The answer is explained here by #Pankaj Parkar
My problem was fixed by renaming ng-model="CityName" to ng-model="data.CityName"
<input style="width:100%" type="text" placeholder="Search" ng-model="data.CityName">
and changing this
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
to
$scope.set=function(title){
$scope.data={'CityName':title};
console.log(title);
}
Related
I have a FORM inside Ion-content and I want to submit that FORM from the button placed inside Ion-footer with all the form validations. Structure of the code at http://play.ionic.io/app/07e251b1e926,
But It is not triggering submit event.Anyone has done this?
Try this, Add label outside form as button and add hidden button inside form also.
<form name="myform" ng-submit="submitmyform()" >
<input type="submit" id="submit" value="Submit" style="display:none"/>
then footer label give for attribute set thebutton id in the form
<label style="width:100%;heigh:30px;background-color:red" for="submit">Submit</label>
Also Should include controller [formController] outside form also.
http://play.ionic.io/app/0e22c14ea697
Using the latest version of Ionic ion-footer you need to add your form again within the footer tags. Footer should be after ion-content close. I did this and now my form can scroll behind the footer and has an extra item-worth of padding at the bottom!
<ion-header>
<ion-navbar>
<ion-title>New Project</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form [formGroup]="newProjectForm" (submit)="addProject()" novalidate>
<ion-list>
<ion-item>
<ion-label color="primary" stacked>Project Title</ion-label>
<ion-input formControlName="title" clearInput></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<form [formGroup]="newProjectForm" (submit)="addProject()" novalidate>
<ion-toolbar>
<button ion-button block color="green" type="submit">
Save
</button>
</ion-toolbar>
</form>
</ion-footer>
This is what helped me on ionic 3, FormBuilder with validation.
<ion-content padding>
<form (ngSubmit)="login()" #loginForm="ngForm">
<ion-list>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" [(ngModel)]="form.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="form.password" name="password"></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button block full large clear [disabled]="!loginForm.form.valid" (click)="loginForm.ngSubmit.emit()">Login</button>
</ion-toolbar>
</ion-footer>
you can use this code in ionic2:
<ion-content>
<form (ngSubmit)="login()" #loginForm="ngForm">
<ion-list>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="text" [(ngModel)]="form.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" [(ngModel)]="form.password" name="password"></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<button ion-button full (click)="loginForm.ngSubmit.emit()">Login</button>
</ion-footer>
Maybe this is a better alternative if you are using FormBuilder instead of ngModel.
Put this code after the form crated in your .ts file.
this.signForm.statusChanges
.subscribe(status => this.formIsValid = status);
In the .html file you can check if the form is valid like this.
<button ion-button round large color="secondary" float-right [disabled]="!formIsValid" (click)="onSubmit()">Save</button>
I know is old question, but the best way i see:
<div>
<form id="my-form">
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<!-- ... -->
<button type="submit" form="my-form">Submit</button>
</div>
I have found a really strange issue with my ionic form, basically I have a single input that is no different from any of the others but if the content is longer than the input box, it seems to disappear but appear with a few actions (see GIF)
Has anyone seen this before?
Code which powers the forms,
<ion-view>
<ion-content class="padding" style="padding-top: 0px;" scroll="true" has-bouncing="true">
<ion-refresher class="primary-color" pulling-text="Refresh" on-refresh="vm.update();" spinner="none">
</ion-refresher>
<div class="group-list list list-inset" style="padding: 14x;">
<label ng-repeat="field in vm.model.Fields | filter: vm.fieldFilter" class="item item-input editor-field">
<span class="input-label font-thin">{{field.Name}}</span>
<input type="text" class="primary-color" placeholder="{{field.Editor === 'readonly' ? 'Readonly' : 'Update'}}"
ng-class="{readonly: field.Editor === 'readonly'}"
ng-model="field.Value"
ng-click="vm.editorFor(field)"
ng-disabled="field.Editor === 'readonly'"/>
</label>
</div>
</ion-content>
</ion-view>
I have an ionic list. I want to bind data to the list when a button is clicked.
$scope.searchY = function(){$scope.youtubeParam = {
key: 'myKey',
type: 'video',
maxResults: '10',
part: 'id,snippet',
q: $scope.searchKey ,
order: 'date',};
$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParam}).success(function(response){
$scope.myVideos = response.items;
angular.forEach(response.items, function(child){
console.log (child);
});
});
I put an event on my search TextBox like this.
<ion-content>
<div>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-enter="searchY()" ng-model="searchKey">
</label>
</div>
<!--<div class="embed-responsive embed-responsive-16by9"><youtube-video video-id="theBestVideo"></youtube-video></div>-->
<div data-ng-controller="AppCtrl" class="list card" ng-repeat="video in myVideos">
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p>{{video.snippet.publishedAt | limitTo: 10}}</p>
</div>
<div class="item item-image">
<div class="embed-responsive embed-responsive-16by9"><youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video></div>
</div>
<div class="item item-divider">
<button class="button button-outline button-block button-positive">
Share this Video
</button>
</div>
</div>
</ion-content>
When I do a search I can see that there are returned results and the $scope.myVideos variable is not empty. But its not getting binded with the list card. Please what am I doing wrong. Been on this for days. it works if I call the function directly without doing a search. Thanks
Every controller creates a new scope, so your search box and your video list are looking at different scopes. When you modify myVideos from the scope the search box is looking at, the changes won't be reflected in the scope that the AppCtrl is looking at.
Try moving ng-controller="AppCtrl" to the ion-content tag, then when you search returns, you can modify the correct scope and the changes should be reflected in the ionic list.
That's my code:
<label class="item item-input " style="height: 10%" ng-click="publish()">
<input type="text" placeholder="Title" ng-model="title">
<i ng-click="publishBlog()" class="button button-clear icon ion-paper-airplane padding-right"></i>
</label>
The "publish()" can be triggered,but not the "publishBlog()".The ionic will put the icon into the .Does the ionic cause it?
within "label" tag your click event will not work, because label is overriding your button click.
so, use DIV instead of label , that will work fine.
As Hardy said, you will have to use div instead of label. But you will be required to use $event.stopPropagation(); to make sure only publishBlog() gets called. Without $event.stopPropagation();, both the functions will get called.
So, here's a sample implementation:
<ion-content class="padding" ng-controller="my">
<div class="item item-input " style="height: 10%" ng-click="publish($event)">
<input type="text" placeholder="Title" ng-model="title">
<i ng-click="publishBlog($event)" class="button button-clear icon ion-paper-airplane padding-right"></i>
</div>
</ion-content>
And your controller:
.controller("my", function($scope){
$scope.publish = function($event) {
alert("title");
};
$scope.publishBlog = function ($event) {
$event.stopPropagation();
alert("icon");
};
});
Here's a demo: http://play.ionic.io/app/1b82ce25ca44
I have an ng-repeat with a button inside which calls a controller method.
I'm using the Ionic Framework which is based on AngularJS
I can't get the button to actually trigger the controller method unless I revert to using plain Angular (or one more variant, which I will show later).
My example of the broken situation can be seen here in jsfiddle.
You can see that the red button works (generates an alert) and the green, inside the ng-repeat doesn't, while it is calling the exact same controller function.
Here is the controller code:
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
var answers = [];
addOptionToArray("Option 1");
addOptionToArray("Option 2");
addOptionToArray("Option 3");
$scope.answers = answers;
$scope.doSomething = function() {
alert("clicked");
};
function addOptionToArray(optionText) {
answers.push({text : optionText});
}
}]);
and the page layout:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<button class="button button-assertive" ng-click="doSomething()">
<i class="icon ion-minus-circled"></i>
</button>
<label class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text">
<div class="buttons">
<button class="button button-balanced" ng-click="doSomething()">
<div>click</div>
</button>
</div>
</label>
</div>
</div>
Now there are two thins that will make the button inside the ng-repeat work again
Replace the Ionice bundle JS reference with a pure `AngularJS' one as can be seen here in jsfiddle
While keeping the Ionic JS reference, remove the <input>' inside the ng-repeat see jsfiddle
Any idea of why having the <input> inside the ng-repeat breaks the button's ng-click?
Or what is broken in Ionic?
Your problem is with block elements inside inline elements. Don't put <div> inside <button> or <label>. Fix it and it works as expected:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<i class="icon ion-minus-circled"></i>
<div class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text" />
<div class="buttons">
Click
</div>
</div>
</div>
</div>