I have implemented ionic accordion effect using the following code. It was working fine as expected, but i want to open the first accordion by default.
<ion-item class="item-stable"
ng-click="toggleGroup(0)"
ng-class="{active: isGroupShown(0)}">
<i class="icon" ng-class="isGroupShown(0) ? 'ion-minus' : 'ion-plus'"></i>
Permanant Address
</ion-item>
<div class="item-accordion" ng-show="isGroupShown(0)">
---------
</div>
<ion-item class="item-stable"
ng-click="toggleGroup(1)"
ng-class="{active: isGroupShown(1)}">
<i class="icon" ng-class="isGroupShown(1) ? 'ion-minus' : 'ion-plus'"></i>
Temporary Address
</ion-item>
<div class="item-accordion" ng-show="isGroupShown(1)">
---------
</div>
controller
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
Just add this line at the end of the for loop:
$scope.shownGroup = $scope.groups[0];
Related
view code:
<ion-view class="forms-view" ng-init="loadall()">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-title>
<span>List</span>
</ion-nav-title>
<ion-content>
<ion-scroll direction="xy" on-scroll="addMoreItem()">
<ion-list ng-controller="card">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="input.filterUser" placeholder="Search" style="height:48px;">
</label>
</div>
<ion-item class="item-avatar item-icon-right" ng-repeat="cardlists in cardlist | filter:input.filterUser" ui-sref="app.details({card_id:cardlists.card_id,xyz:0})">
<img src="{{cardlists.avatar}}" >
<h2>{{cardlists.name}}</h2>
<p>{{cardlists.card_id}} </p>
<i class="icon ion-plus-round custom-icon" ng-show="!cardlists.isShow" ng-click="addTo(cardlists.card_id);cardlists.isShow = true"></i>
<i class="icon ion-checkmark-round" ng-show="cardlists.isShow"></i>
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
</ion-view>
controller code:
controller('boardCtrl', function ($scope, $http, $cordovaSQLite, $localStorage, $state,$rootScope,$ionicPlatform,$ionicPopup,$timeout,$filter,$ionicNavBarDelegate) {
$rootScope.limit_list=10;
$scope.addMoreItem=function()
{
if($scope.cardlist.length >= $rootScope.limit_list)
{
$rootScope.limit_list+=5;
}
$scope.loadall();
}
$scope.loadall=function()
{
$rootScope.cardlist = [];
var query2 = "SELECT * FROM abc LIMIT "+$rootScope.limit_list;
$cordovaSQLite.execute(db, query2, []).then(function (res) {
if (res.rows.length > 0) {
for (var j = 0; j < res.rows.length; j++) {
var name = res.rows.item(j).name;
$rootScope.cardlist.push({
name: name,
age: res.rows.item(j).age,
card_id: res.rows.item(j).card_id,
avatar: "img/avatar5.png"
});
}
}
}
}
}
I want to display a list whenever view is loaded and its working fine.The only change what i want to make is to display only 10 names by default and once i scroll down the page i want to load 10 more and so on.The above code is working perfectly fine but only in x direction i.e horizontal scroll.I want it load more name once i scroll down side i.e vertical scroll.Can any one tell me what is the issue with above code.It will be helpful.
angular.module('starter.services', [])
.factory('Chats', function($http) {
// Might use a resource here that returns a JSON array
// Some fake testing data
var chats=[];
$http({
method: 'GET',
url: 'js/champions.json'
}).then(function success(data) {
for (var i = 1; i < 700; i++) {
if (data.data.data[i]!=undefined) {
chats.push(data.data.data[i]) ;
//console.log(data.data.data[i]);
}
}
});
//console.log(chats);
return {
all: function() {
return chats;
},
remove: function(chat) {
chats.splice(chats.indexOf(chat), 1);
},
get: function(chatId) {
for (var i = 0; i < chats.length; i++) {
if (chats[i].id === parseInt(chatId)) {
return chats[i];
}
}
return null;
}
};
}) ;
<ion-view view-title=" Tüm Kahramanlar">
<ion-content>
<ion-list>
<ion-item>
<ion-label fixed>Arama</ion-label>
<input type="text" style="width: 100%" placeholder="Karakter Adına Göre Filtrele" ng-model="search" ></input>
</ion-item>
</ion-list>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats | orderBy : 'key' | filter : search " type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="http://ddragon.leagueoflegends.com/cdn/7.18.1/img/champion/{{chat.image.full}}">
<h2>{{chat.name }}</h2>
<p>{{chat.title}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Guys , How can ı filter this ng repeat code its coming like nothing happened. so its not filtered . please help me :( ı think its model think not changed when ı am write | filter : 'NameSomething' its Working but ı cant get in there ng model how can ı do this :?
Try like this :
Change this line : (Make sure you define $scope.search = {}; in controller)
<input type="text" style="width: 100%" placeholder="Karakter Adına Göre Filtrele" ng-model="search.name" ></input>
Simple Implementation :
Search with name:
<input type="text" ng-model="searchData.name">
<div ng-repeat="chat in chats | filter:searchData"> {{chat.name}}</div>
Working Demo :
https://plnkr.co/edit/t6B6fZDRCSLuBN36GLVD?p=preview
I created a list in Checkbox, listing products where the user can choose a product. I need add in the product list an option where the user can change the quantity of products selected. How I can do it?
My View:
<ion-view view-title="Bebidas Adicionais" ng-controller="exBebidasCtrl" >
<div class="bar bar-subheader">
<h2 class="title">{{'Sub-Total R$ ' + getTotalSelected()}}</h2>
</div>
<ion-refresher pulling-text="Puxe para atualizar..." on-refresh="doRefresh()"></ion-refresher>
<ion-list class="card list">
<div class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="q" placeholder="Procurar" aria-label="filter bebidasextras" />
</div>
</ion-list>
<ion-list>
<div ng-repeat="bebida in bebidasextras">
<ion-checkbox ng-model="bebida.selected" >
<h2>{{bebida.ad_bebida_titulo}}</h2>
<p>R$ {{bebida.ad_bebida_valor}}</p>
</ion-checkbox>
</div>
</ion-list>
<button class="button button-block button-balanced">
<a ng-click="addToCart(bebida.ad_bebida_titulo,bebida.ad_bebida_valor)" class="button button-assertive button-clear icon ion-android-cart"> Continuar Comprando </a>
</button>
</ion-content>
My Controller:
$scope.bebidasextras = [];
var promise = $http.get('http://nhac.esy.es/api_carrinho/lista_bebida_extra.php?json=restaurantes')
.success(function(retorno) {
console.log(retorno);
$scope.bebidasextras = retorno; // não precisa fazer retorno.data
$scope.user = {
bebidasextras: [$scope.bebidasextras[1]]
};
$scope.checkAll = function() {
$scope.user.bebidasextras = angular.copy($scope.bebidasextras);
};
$scope.uncheckAll = function() {
$scope.user.bebidasextras = [];
};
$scope.checkFirst = function() {
$scope.user.bebidasextras = [];
$scope.user.bebidasextras.push($scope.bebidasextras[0]);
};
$scope.setToNull = function() {
$scope.user.bebidasextras = null;
};
$scope.getTotalSelected = function() {
var total = 0;
for(var i = 0; i < $scope.bebidasextras.length; i++){
var bebida = $scope.bebidasextras[i];
total += bebida.selected ? Number(bebida.ad_bebida_valor) : 0;
}
return total;
}
})
.error(function(erro) {
console.log(erro);
});
You can have an input box having a + and - button. Clicking upon which user can change the quantity of product selected.
If you can share some more details probably I would be able to answer in a better way.
I have a ng-repeat list, that has a button that changes the state of the item, when I click the button I run the following:
$scope.fav = function(item) {
var i = $scope.news.indexOf(item);
console.log('index', i);
console.log('$scope.news[i].fav', $scope.news[i].fav);
console.log('$scope.news[i]', $scope.news[i]);
if ($scope.news[i].fav === 0) {
console.log('is 0');
$scope.news[i].fav = 1;
} else {
console.log('its not 0');
$scope.news[i].fav = 0;
}
};
It finds the object without a problem, but
$scope.news[i].fav = 1;
or
$scope.news[i].fav = 0;
Never changes the final value. (Keeps returning 0)
Already tried adding $scope.$apply(); with no avail..
MARKUP:
<ion-list class="list item-text-wrap" can-swipe="true">
<ion-item class="item item-thumbnail-left animated fadeIn" ng-repeat="item in news | filter: {title: sinTildes} | orderBy: '-pubDate'" href="#/feed/{{item.source}}/{{item.link}}/{{item.title}}" ng-click="openNews(item)">
<img class="gm-thumbnail" src="{{item.image}}">
<h2>{{item.title}}</h2>
<div class="gm-bottom-left">
<h4 class="dark">{{item.source}} -
<span am-time-ago="item.pubDate"> </span>
</h4>
</div>
<div class="gm-bottom-right">
<span class="icon ion-ios-eye ng-hide font-medium assertive" ng-show="item.rss"></span>
</div>
<ion-option-button class="button-stable" ng-click="fav(item)">
<span ng-show="item.fav"> <i class="icon ion-ios-star energized animated fadeIn"></i></span>
<span ng-show="!item.fav"> <i class="icon ion-ios-star-outline dark animated fadeIn"></i></span>
</ion-option-button>
</ion-item>
</ion-list>
It is an Ionic issue.
I fixed it using angular.copy like this:
$scope.fav = function(item) {
var i = $scope.news.indexOf(item);
var news = angular.copy($scope.news);
console.log('index', i);
console.log('news[i].fav', news[i].fav);
console.log('news[i]', news[i]);
if (news[i].fav === 0) {
console.log('is 0');
DBnews.fav(news[i].link, 1).then(function() {
news[i].fav = 1;
$scope.news[i] = {};
$scope.news[i] = angular.copy(news[i]);
})
} else {
console.log('its not 0');
DBnews.fav(news[i].link, 0).then(function() {
news[i].fav = 0;
$scope.news[i] = {};
$scope.news[i] = angular.copy(news[i]);
});
}
};
I have 3 elements, which shows by conditional. on click of them using the 'ng-class' I am showing or hiding the element.
here is the HTML :
<div class="userOptions">
<div class="row designOption" ng-class="{'active':proDesign}">
<span ng-click="categories('proDesign')" class="icon iconD">D</span>
<span class="info infoD">Design</span>
</div>
<div class="row suplyOption" ng-class="{'active':Supply}">
<span ng-click="categories('proSupply')" class="icon iconS">S</span>
<span class="info infoS">Supply</span>
</div>
<div class="row constOption" ng-class="{'active':Construct}">
<span ng-click="categories('proConstruct')" class="icon iconC">C</span>
<span class="info infoC">Construction</span>
</div>
</div>
But using the scope function I am not able to shuffle the class name active. here is my try:
$scope.proDesign = false;
$scope.proConstruct = false;
$scope.proSupply = false;
$scope.categories = function (categ) {
$scope.proDesign = false; //all are false.
$scope.proConstruct = false;
$scope.proSupply = false;
$scope[categ] = !$scope[categ]; //became true
}
But this is not working. if so, what is the correct way to do this?