I'm building an ionic to do list app.
I'm working on a delete function where you click the delete button and it will delete the list item, but have I'm having problems and can't figure it out.
the delete button shows, but when you click it nothing happens.
HTML:
<ion-view view-title="To-Do">
<ion-content class="padding">
<!-- http://ionicframework.com/docs/components/#bar-inputs -->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon placeholder-icon"></i>
<input type="text" ng-model="item.name" placeholder="Enter Task Here">
</label>
<button class="button ion-ios-plus-outline" ng-click="addItem(item)">
</button>
</div>
<ion-list>
<ion-item class="item-remove-animate" ng-repeat="item in items" >
<h3>{{item.name}}</h3>
<ion-option-button class="button-assertive ion-trash-a" ng-click="remove($index)"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Controller:
.controller('ShortTermCtrl', function($scope, Task) {
$scope.data = Task.data;
$scope.items = [];
$scope.item = {};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {name: ""};
};
$scope.removeItem = function(index){
$scope.items.splice(index, 1);
};
})
You use the wrong function name in view. Change it from remove to removeItem:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem($index)"></ion-option-button>
for ng-repeat use
ng-repeat='(index, item) in items'
to keep track of the index of every item, and pass the index to the remove function
ng-click="removeItem({{index}})"
As per your codexample, you commented out the remove(task) function, you need to target the removeItem(index) function in your HTML
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(1)">
Instead of a static index number, provide the items/index itself to a generic function, then delete that array item, like so:
$scope.removeItem = function(items, index){
items.splice(index, 1);
};
Your HTML will look like so:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(items, $index)">
The $index is automatically exposed to your ng-repeat scope among other useful properties, you can read more in the docs of ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
Related
I am developing a hybrid application by using Ionic Framework. However, my application failed in double binding when user back to hybrid application. The application able to retrieve Array Object from localstorage but my ngrepeats failed to load the var I assigned from localstorage. The following is my code.
controller.js
.controller('ChatsCtrl', ['$scope','$state', '$ionicTabsDelegate' , '$ionicListDelegate', '$rootScope'
,function($scope,$state,$ionicTabsDelegate, $ionicListDelegate, $rootScope) {
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = channel_list;
}])
HTML File
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom({{'chat.displayName'}}, {{'chat.channelID'}})">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try calling a function on page load that re initialize your list something like this,
Controller.js
$scope.init = function(){
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
}
$scope.init();
And make sure when ever you visit this page this function is fired.
Note: if you are on the same page and wants to rebind the list then call this function in your goBack() or goForward() function where ever required.
Hope this solves your problem.
JS
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
HTML file
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom(chat.displayName,chat.channelID)">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
ng-click="chatRoom(chat.displayName,chat.channelID) Pass value like this.
I have a collapsed model which show more information about client, and insid it, I have a button, when I click, I don't get the informations of the specific client, I get data of all clients
<ion-list ng-repeat="x in names">
<a class="item item-icon-left " >
<i class="icon ion-android-arrow-dropdown-circle" ng-model="collapsed" ng-click="collapsed=!collapsed"></i>
{{x.Marque}}
</a>
<div ng-show="collapsed">
<table>
<thead >
<td>
<label> Code: </label> {{x.CodeClient}} <br/>
<label> Nom: </label> {{x.NomClient}} <br/>
<a class="button button-info" ui-sref="modifClient({CodeClient: x})" >
Enregistrer
</a>
...
app.js
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
modifClient.html
<ion-content class="padding" ng-controller="ConsultClientCtrl" ng-repeat="x in names | filter: {CodeClient: thisX}" >
<ion-list ng-repeat="x in names | filter: {CodeClient: thisX}: true">
<div class="item item-divider center-text" ng-model="CodeClient"> {{x.CodeClient}} </div>
......
You have to use the framework's href: ngHref or ng-click
<a class="button button-info" ng-href="/modifClient"> ...
LE: I've created a pen for this case. The problem is that you have an <a> in <a> and when you click it then it get's confused.
So I've changed the <a ng-show="collapsed"> to <div ng-show="collapsed"> and now works as expected (see pen too).
If you are using Angular ui-router and modifClient is a state in your router, you better use the Angular ui-sref attribute instead of HTML href.
Your code would be :
<a class="button button-info" ui-sref="modifClient">
Edit:
If you want to pass an object param in the ui-sref you can do it like this:
<a class="button button-info" ui-sref="modifClient({CodeClient: x.CodeClient})">
And change your state settings to include a params object:
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
Note:
Note that you should also update your ConsultClientCtrl controller with a $scope.CodeClient variable so it can be updated from the ui-sref.
You can read How to pass parameters using ui-sref in ui-router to controller for further options.
Edit 2:
After reading your last Edit, I can see that you don't have a CodeClient variable in your controller, so update it like this:
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.CodeClient = null;
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
And in your HTML just use:
<div class="item item-divider center-text"> {{CodeClient}} </div>
Without <ion-list ng-repeat ...> and the filter part as we already got the CodeClient variable in the Controller.
Thanks for every one,This is the solution I found:
change the code of the button:
<a class="button button-info" ng-href="#/modifClient/{{x.CodeClient}}" >
Enregistrer </a>
And in app.js, I had to use $state:
app.controller("ConsultClientCtrl", function($scope, $http,$state) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/selectClient.php")
.success(function(data){
$scope.thisX = $state.params.CodeClient;
$scope.names = data;
});
}
});
And changing the state provider to this:
$stateProvider.state('modifClient', {
url: '/modifClient/:CodeClient',
templateUrl: 'templates/modifClient.html',
controller: 'ConsultClientCtrl'
});
html page
here i have two buttons in each list.when click on one of the button take that list item and show in other page.when click next click item it will also take that item to the same page.please give me suggestions or code.
<ion-view ng-controller="searchctrl as nm">
<ion-content class="has-header">
<h2>Courses</h2>
<label class="item item-input">
<i class="icon ion-search placeholder-icon">
</i>
<input type="search" placeholder="search" ng-model="searchQuery"/>
</label>
<ion-list>
<ion-item class="item-icon-right" ng-repeat="news in newss | filter:searchQuery"
ng-click= "nm.selectNews(news.name)">
{{news.name}}
<div class="buttons">
<button class="button button-small button-positive" >
View
</button>
<button class="button button-small button-positive">
Add to Mycourse
</button>
</div>
</ion-item>
</ion-list>
js page
(function(){
var aapp = angular.module('starter');
aapp.controller('searchctrl', function($state, $scope){
$scope.newss = [
{name: 'HTML'},
{name: 'JavaScript'},
{name: 'Angular'},
{name: 'Ionic'},
{name: 'Asp.net'}
]
var nm=this;
nm.selectNews = function(newsname){
console.log(newsname);
$state.go(newsname);
}
});
}());
First take an array to store items selected like this :
$scope.cart = [];
Then, add this function, it will first check if this item is already added then quantity will be raised otherwise item will be pushed in cart array.
$scope.addToCart = function (product) {
var found = false;
$scope.cart.forEach(function (item) {
if (item.id === product.id) {
item.quantity++;
found = true;
}
});
if (!found) {
$scope.cart.push(angular.extend({quantity: 1}, product));
}
};
Hope this will help you..any doubts?
I have simple app with a menu on the left with just two options:
When I click on the "Servicios" option I'm loading some categories from my Parse application:
Then, if I click on the "Tablero" option and then again try to go back to "Servicios" option by clicking on the menu, the data doesn't load:
This is my controller:
.controller('ServicesCtrl', function($scope, $state) {
$scope.categories = {};
// Categories
var Category = Parse.Object.extend("Category");
var query = new Parse.Query(Category);
query.equalTo("isActive", true);
query.ascending("name");
query.find({
success: function(categories) {
$scope.categories = categories;
}
});
})
And this is my view:
<ion-view class="services-view" cache-view="false">
<ion-nav-title>
<span>Servicios</span>
</ion-nav-title>
<ion-content>
<ion-list class="list">
<ion-item ng-repeat="category in categories" class="item item-thumbnail-left">
<img src="img/cut.svg">
<h2>
{{ category.get("name") }}
</h2>
<p>
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Do I need to do some extra work for loading again?
I need a static value from list tag when click or touch in mobile individually. how to get it in angularjs
<ion-list ng-controller="MyCtrl">
<ion-item menu-close ng-value="apple">
Apple
</ion-item>
<ion-item menu-close ng-value="orange">
Orange
</ion-item>
<ion-item menu-close ng-value="pineapple">
PineApple
</ion-item>
<ion-item menu-close ng-value="mango">
Mango
</ion-item>
</ion-list>
angularjs
.controller('MyCtrl', function($scope) {
})
Here's a working example using href: http://plnkr.co/edit/35wTi7?p=info
Here's a working example using ng-click: http://plnkr.co/edit/NN4cWr?p=preview
These examples are dynamic, but you'll get the point.The second example is much better in your case.
This is what you want to do:
HTML:
<ion-item menu-close ng-click="someFunction('apple')">
Apple
</ion-item>
<ion-item menu-close ng-click="someFunction('orange')">
Apple
</ion-item>
JavaScript
// We must use .dot notation with Ionic
$scope.fruit = {
selected : ''
};
$scope.someFunction= function(id) {
console.log(id); // Will print apple
$scope.fruit.selected = id;
}
My examples are also called a Master-Detail pattern, click here to find out more.
It's still unclear to me what you need, but to bind a value to the HTML just populate the scope and use it:
HTML:
<ion-list ng-controller="MyCtrl">
<ion-item menu-close>{{apple}}</ion-item>
<ion-list>
JS:
.controller('MyCtrl', function($scope) {
$scope.apple = "This is an apple";
})
Take a look to this example from Angular documentation:
https://docs.angularjs.org/api/ng/directive/ngValue#example