I have a text that I call from database.
Here is my controller:
.controller('selengkapCtrl',function($scope,$ionicHistory,$http,$stateParams){
$scope.goBack = function(){
$ionicHistory.goBack();
}
// deklarasi variable
var id_lapangan = $stateParams.id_lapangan;
$scope.selengkap = [];
$http.get("http://localhost/TA2/admin/app/getUserId.php?id_lapangan="+id_lapangan).success(function(data){
$scope.selengkap = data;
console.log(data);
})
})
and here is my template:
<ion-view ng-controllers="selengkapCtrl">
<ion-content>
<div class="row" ng-repeat="selengkap in selengkap">
<p>{{selengkap.deskripsi}}</p>
</div>
</ion-content>
</ion-view>
for now. the result is like this.
What I want is that the sentence cut and the result of the text is like this:
"This Word is very long. How to"
So, if I want to read the full description, I have to click that hyperlink text.
How to fix this problem?
any help would be glad to see it!
Thanks !
You can get substring in ionic using limitTo
<p>{{(selengkap.sortdeskripsi.length > 30) ? (selengkap.sortdeskripsi | limitTo:30) : selengkap.sortdeskripsi}}</p>
Try this
$http.get("http://localhost/TA2/admin/app/getUserId.php?id_lapangan="+id_lapangan).success(function(data){
$scope.selengkap = data;
if ($scope.selengkap.deskripsi.length > 30) {
$scope.selengkap.deskripsi = $scope.selengkap.deskripsi.substr(0, 30) + ' ...';
}
console.log(data);
})
<ion-view ng-controllers="selengkapCtrl">
<ion-content>
<div class="row" ng-repeat="selengkap in selengkap">
<p>{{selengkap.deskripsi}}</p>
</div>
</ion-content>
</ion-view>
$http.get("http://localhost/TA2/admin/app/getUserId.php?id_lapangan="+id_lapangan).success(function(data){
$scope.selengkap = data;
if ($scope.selengkap.deskripsi.length > 30) {
$scope.selengkap.sortdeskripsi = $scope.selengkap.deskripsi.substr(0, 30) + ' ...';
}
console.log(data);
})
<ion-view ng-controllers="selengkapCtrl">
<ion-content>
<div class="row" ng-repeat="selengkap in selengkap">
<p>{{selengkap.sortdeskripsi}}</p>
</div>
</ion-content>
</ion-view>
Related
I have tried every solution but nothing has worked. I am building a chat app where i want it to be scrolled to last message automatically,also when new message comes it scrolls to the bottom.
I have tried scrollTo() on the #content but it doesn't work
chat.html
<ion-content #content *ngIf="buddy">
<div class = "chatwindow">
<ion-list no-lines *ngIf="allmessages">
<ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>
<ion-avatar item-left *ngIf="item.sentby === buddy.uid">
<img src="{{buddy?.photoURL}}">
</ion-avatar>
<div class="bubble me" *ngIf="item.sentby === buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
<ion-avatar item-right *ngIf="item.sentby != buddy.uid">
<img src="{{photoURL}}">
</ion-avatar>
<div class="bubble you" *ngIf="item.sentby != buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
chat.ts
#ViewChild('content') content: Content;
scrolltoBottom() {
setTimeout(() => {
// this.content.scrollToBottom();
}, 1000);
}
Your code should be like this.
export class ChatPage {
#ViewChild('content') content: Content;
constructor(public navCtrl: NavController) {
this.scrolltoBottom()
}
scrolltoBottom() {
setTimeout(() => {
this.content.scrollToBottom();
}, 300);
} }
I need help.. How can I show more words if something is longer than 20 characters?
<ion-list no-padding no-border no-margin>
<ion-item *ngFor="let item of items | async | reverse">
<ion-card no-padding no-border>
<img [src]="item.url" />
<ion-row>
<ion-item ion-start class="font">{{item.descrizione}}</ion-item>
</ion-row>
</ion-item>
</ion-list>
Now if {{item.descrizione}} is too long it simply doesn't show more. I thought that *ngIf {{item-descrizione.length}} > 20 could solve my problem but I don't know how to continue with show more/less text.
Thank you!
What about using pipes? This is something what I have done.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'truncate'
})
export class TruncatePipe {
transform(value: string, args: string[]) : string {
let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
let trail = args.length > 1 ? args[1] : '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
and Component class and template goes something like this
export class TruncatedTextComponent {
limit: number = 40;
truncating = true;
}
<div *ngIf="text">
<div *ngIf="text.length <= limit">{{text}}</div>
<div *ngIf="truncating && text.length > limit">
{{text | truncate : limit}}
<button ion-button (click)="truncating = false">show more</button>
</div>
<div *ngIf="!truncating && text.length > limit">
{{text}}
<button ion-button (click)="truncating = true">show less</button>
</div>
</div>
Happy new year for all of you.
I have a problem to update item in list using http request:
This is my code: in ts
ionViewWillEnter() {
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
this.run_scriptsvis = setInterval(() => {
if (localStorage.getItem('sessionnewvisites') === '1') {
this.getnewvisit();
localStorage.removeItem('sessionnewvisites');
console.log('refresh');
} else {
console.log('no refresh');
}
}, 3000);
}
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
console.log(this.datacool);
});
});
}
In my html i have this:
<ion-row no-padding>
<ion-col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12>
<ion-list no-margin>
<ion-item-sliding *ngFor="let user of datacool" (ionSwipe)="delete(user)">
<ion-item style="min-height:10vh" class="cardcolor item-tittle" no-padding text-wrap (click)="openprofile(user.userid)">
<div item-left no-margin>
<img style="max-width: 80px;margin-left: 7px;" src="{{user.tnpicture}}">
</div>
<div item-top>
<h2 text-wrap><img src="{{user.online}}"> {{user.username}}</h2>
</div>
<div class="span-small">
{{user.age}} ans, {{user.gender}}
</div>
<div item-bottom>
<div class="span-small" text-left><ion-icon name="pin"></ion-icon> {{user.countyname}}</div>
<div></div>
<h3 left padding-left>{{user.date}}</h3>
</div>
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="delete((user.id))" >delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-col>
</ion-row>
The code work good and do the update when there are new data.
The problem is that I don't want to revome the older item and replace it with the new.
I want the new item in the top and the old item in bottom of the new.
Thank you so much for helping me
Thanks i have found the solution
users2: any[] = [];
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
for (let i = 0; i < this.datacool.length; i++) {
this.users2.push(this.datacool[i]);
}
console.log(this.datacool);
});
});
}
I have an app in Ionic v.1 and on page where I have a list of articles, I would like to have a splash screen until the first image is completely loaded, not sure how to do that?
This is the controller:
module.exports = angular.module('coop.controllers')
.controller('ArticlesController', function($scope, ArticleService, $state, $ionicScrollDelegate, $location, $ionicPosition, $ionicConfig) {
$scope.articles = ArticleService.all();
$scope.$on('$ionicParentView.afterEnter', function(event, data) {
$scope.videoPlaying = [];
$ionicConfig.views.swipeBackEnabled(false);
if (data.direction == 'back') {
$scope.doRefresh();
}
});
$scope.articleType = 'all';
$scope.articleFilter = function(button) {
$scope.articleType = button;
$scope.doRefresh();
};
$scope.showBulletPoint = function(which) {
return $scope.articleType == which;
}
$scope.like = function(article){
article.userLiked = !article.userLiked;
ArticleService.like(article)
};
$scope.doRefresh = function (){
var articleType = $scope.articleType ? $scope.articleType : 'all';
ArticleService[articleType]().$promise.then(function(data){
$scope.articles = data;
}).finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
$scope.videoPlaying = [];
$scope.playerVars = {
controls: 0,
showinfo: 0
};
$scope.playVideo = function(youtubePlayer, index) {
$scope.videoPlaying[index] = true;
youtubePlayer.playVideo();
};
$scope.$on('$ionicView.afterLeave', function(event, data) {
$scope.videoPlaying = false;
$ionicConfig.views.swipeBackEnabled(true);
//youtubePlayer.stopVideo();
});
});
And this the html:
<ion-view>
<div class="row articles-header">
<button menu-toggle="left" class="button button-icon icon ion-navicon-round"></button>
<div class="right-icons">
<!--<a class="button button-icon icon ion-ios-search-strong">
</a>-->
<a class="button button-icon" href="#" ng-click="articleFilter('all')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('all')"></i> Siste
</a>
<a class="button button-icon" href="#" ng-click="articleFilter('video')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('video')"></i> Video
</a>
<a class="button button-icon" href="#" ng-click="articleFilter('popular')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('popular')"></i> Populært
</a>
</div>
</div>
<ion-content class="articles-content">
<ion-refresher pulling-icon="false" on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="article in articles" class="item-light">
<div class="article">
<a ng-if="authenticated" ng-show="article.external_media.length == 0" ui-sref="main.article({id: article.id})" nav-direction="forward" class="article-image-link">
<img class="img" src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<a ng-if="!authenticated" ng-show="article.external_media.length == 0" ui-sref="main.articlePublic({id: article.id})" nav-direction="forward" class="article-image-link">
<img class="img" src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<a ui-sref="main.article({id: article.id})">
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.image != ''">
<img class="img" ng-src="{{ article.external_media[0].image }}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
<div class="iframe-overlay">
<div class="play">
<img class="playButton" src="icons/playRectangle.svg"/>
</div>
</div>
</div>
</a>
</div>
<div class="row article-meta" ng-class="{ 'has-comments': article.enable_comments }">
<a ng-click="like(article)" class="subdued col col-30">
<img class="social-images" ng-src="icons/{{ article.userLiked ? 'heart' : 'heart-outline' }}.svg"/> Lik
</a>
<a ui-sref="main.article({id: article.id, gotoComments: true })" class="subdued col col-60" ng-if="article.enable_comments">
<img class="social-images" src="icons/comment.svg"/> {{ article.commentCount }} Kommentarer
</a>
<a ui-sref="main.article({id: article.id})" nav-direction="forward" class="col col-10 article-link right">
<img class="social-images" src="icons/arrow.svg"/>
</a>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
One approach is to attach an onLoad handler to the images, and when the first image (or any other specific image, all, etc) have loaded you can remove your splash screen.
To do this we'll create a directive to handle the onload event, based on this outstanding solution from Peter, combined with the $ionicLoading loader.
var app = angular.module('app', ['ionic'])
app.controller('appCtrl', function($scope, $timeout, $ionicLoading) {
// Setup the loader
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
// Add a simple onLoad callback
$scope.onLoad = function (id) {
if (id === 0) {
$ionicLoading.hide();
}
}
$scope.items = [
{img: 'http://placehold.it/5000x8000/f9009a/ffffff'},
{img: 'http://placehold.it/5000x8000/f9009a/ffffff'},
{img: 'http://placehold.it/5000x8000/f9009a/ffffff'}
];
});
// The imageonload directive
app.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
//call the function that was passed
scope.$apply(attrs.imageonload);
});
}
};
})
Then use the directive:
<ion-item ng-repeat="item in items" href="#">
<img ng-src="{{item.img}}" imageonload="onLoad({{$index}})" id="img-{{$index}}" />
</ion-item>
When the app loads the $ionicLoading screen will be shown until the first image emits the onload event, causing the $ionicLoading screen to be removed.
For a working demo, see this Ionic Play demo.
The loading screen may only be noticeable the first time you load the demo, and on subsequent loads you might need to do a hard refresh.
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.