I have a scrolling list in my mobile app which I build using ionic 1.0.1. The list is quite choppy when scrolling. The text blurs a little when scrolling. I checked Facebook's app on my phone and it scrolls very nicely, no chopping and blur. I have created a code pen and was wondering if there is anything I can do to improve the performance of this:
http://codepen.io/anon/pen/GJdpRz
HTML:
<html ng-app="mobileApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic List Bug</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-content>
<ion-item collection-repeat="item in items">
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>{{item}}</h2>
<p>{{item}}</p>
</div>
<div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
{{item}}
</p>
<p>
1 Like
5 Comments
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i> Share
</a>
</div>
</div>
</ion-item>
</ion-content>
</body>
</html>
JS:
angular.module('mobileApp', ['ionic'])
.config(function($ionicConfigProvider) {
if (!ionic.Platform.isIOS()) $ionicConfigProvider.scrolling.jsScrolling(false);
})
.controller('MainCtrl', ['$scope', function($scope) {
$scope.items = [];
for (i = 0; i < 10; i++) {
$scope.items.push("Item " + i);
}
}]);
There isnt much we can do right now, but for now you can put this is your .config , this will allow native scrolling. I did see a performance improvement in scrolling.
.config(function($ionicConfigProvider) {
if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
show <div> list as responsive drop down list under second textbox from the give JsFiddle using bootstrap
JsFiddle
I have two textbox with Col-xs-6. In that I want output like this image
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>orange</li>
<li>bnana</li>
<li>lemon</li>
<li>apple</li>
</ul>
</div>
</div>
input {
width: 100%;
}
Then it will take same width of your list items.
In this sample we 2 drop down with bootstrap framework and angularjs which you can change them with click or default value.
var app = angular.module('httpApp', []);
app.controller('httpAppCtrlr', function($scope, $http) {
$scope.items = ["orange", "banana", "lemon", "apple"]
$scope.selected = $scope.items[0];
$scope.onChange = function(item) {
$scope.selected = item;
}
//2
$scope.selected2 = false;
$scope.onChange2 = function(item) {
$scope.selected2 = item;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" ng-app='httpApp' ng-controller='httpAppCtrlr'>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
{{selected}}
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="item in items" ng-click="onChange(item)">{{item}}</li>
</ul>
</div>
<hr>
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
{{selected2 ? selected2 : 'select once...'}}
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="item in items" ng-click="onChange2(item)">{{item}}</li>
</ul>
<a ng-hide="!selected2" ng-click="selected2 = false">remove</a>
</div>
</div>
I am trying to use UI router but I can't get to open the view of the first page don't know why it won't show the template. It would only show the index.html element. Help would be appreciated I am new to Angular
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webstie Designing</title>
<!-- Angular Scripts -->
<script src="js/angular.min.js"></script>
<script src ="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Scripts-->
<script type="text/javascript">"app/app.js"</script>
</head>
<body id="page-top" ng-app="portfolio">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#/">Web Designing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
(function(){
"use strict";
var app = angular.module("portfolio",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",
function("$stateProvider","$urlRouterProvider"){
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home",{
url:"/",
templateUrl:"app/Intro.html"
})
}]
);
}());
First thing you need to refer app.js script reference correctly to make portfolio module available for ng-app
<script type="text/javascript" src="app/app.js"></script>
instead of
<script type="text/javascript">"app/app.js"</script>
So, I have a code pen link here: http://codepen.io/anon/pen/oXwZmr
In that, they combined all the templates in index.html (tabs.html, mainContainer.html, entry.html, ...) and all controllers of template pages in js file(MainController, TabsPageController, ...).
I wanted to keep all things separate, so i did like index.html, mainController.html mainController.js, tabs.html, tabs.js, app.js.
The codepen works perfectly. But I am getting problem. My Content is going behind tabs.
index.html
<html ng-app="DroidRestClient">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Droid Rest Client</title>
<!-- <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet" type="text/css"/>
<!--ionic/angularjs js-->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="templates/mainContainer/mainContainer.js" type="text/javascript"></script>
<script src="templates/tabs/tabs.js" type="text/javascript"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
angular.module('DroidRestClient', ['ionic', 'DroidRestClient.mainController', 'DroidRestClient.tabsPageController'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url : '/main',
templateUrl : 'templates/mainContainer/mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs/tabs.html',
controller : 'TabsPageController'
}
}
});
$urlRouterProvider.otherwise('/main/tabs');
}]);
mainContainer.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="main">
</ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Settings</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
mainContainer
angular.module('DroidRestClient.mainController', ['ionic'])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
};
}]);
tabs.html
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Request" icon-off="ion-ios-cloud-upload-outline" icon-on="ion-ios-cloud-upload">
<ion-content has-header="true" padding="true">
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-divider item-button-right">
Url
</div>
<label class="item item-input">
<input type="text" placeholder="enter url">
</label>
<div class="item item-divider item-button-right">
Method
</div>
<label class="item item-input">
<div class="input-label">
Method
</div>
<select>
<option selected>GET</option>
<option>POST</option>
<option>PUT</option>
<option>DELETE</option>
</select>
</label>
<div class="item item-divider item-button-right">
Parameters
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No parameters
</div>
</div>
<div class="item item-divider item-button-right">
Headers
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No headers
</div>
</div>
<div class="item item-divider item-button-right">
Body
</div>
<label class="item item-input">
<textarea placeholder="enter body"></textarea>
</label>
</div>
</form>
</ion-content>
</ion-tab>
<ion-tab title="Response" icon-off="ion-ios-cloud-download-outline" icon-on="ion-ios-cloud-download">
<ion-content has-header="true" padding="true">
<h2>Response</h2>
</ion-content>
</ion-tab>
</ion-tabs>
tabs.js
angular.module('DroidRestClient.tabsPageController', ['ionic'])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}]);
Give class="has-header" to ion-content.
<ion-content class="has-header">
</ion-content>
And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.
Add has-header="true" in tabs.html
in example; <ion-view title="{{navTitle}}" has-header="true" left-buttons="leftButtons">
I was also facing the same issue and it worked for me.
I've got the following code
Check on codepen
<html ng-app="optik">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menu query replication</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<body ng-controller='ContentController'>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
<div class="h1 title"> Ionic Optik! </div>
<button class="button button-icon icon ion-more" ng-click="console.log('clickie')"></button>
</ion-header-bar>
<ion-content has-header="true">
<input type="text" placeholder="Nombre" ng-model="query.test" />
<h3> Hola {{query.test}}</h3>
<!--
<ion-list>
<ion-item ng-repeat="cliente in clientes">
{{cliente.nombre}}
</ion-item>
</ion-list>
-->
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left" expose-aside-when="large">
<ion-header-bar class="bar bar-header bar-stable">
<div class="h2 title"> Busqueda </div>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<label class="item item-input">
<input type="text" placeholder="Nombre" ng-model="query.nombre" />
</label>
<label class="item item-input">
<input type="text" placeholder="Ciudad" />
</label>
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="meses" min="0" max="12" />
<i class="icon ion-volume-high"></i>
</div>
</ul>
<h3>{{query.nombre}}<h3>
<h3>Hola {{query.test}}</h3>
<h3>{{texto}}</h3>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
Js file
angular.module('optik', ['ionic']);
angular
.module('optik')
.controller('ContentController', ContentController);
ContentController.$inject = ['$scope', '$ionicSideMenuDelegate'];
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
It includes a text input inside side view with ng-model='query.nombre'. It updates a {{query.nombre }} inside the sidenav but not one on the Right pane. Any idea what the issue might be?
Your problem is that $scope.query is undefined into your controller.
Therefore $scope.query.test is not working.
Add this the your controller definition : $scope.query={}
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.query={}
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
I'm trying to learn ionic framework, and I have been reading routing side of things and this is were I am getting a little stuck.
I had my app working, but now I want to add more views. So, I have started by putting my home view in a state called 'home' (sorry if i am not using the correct terminology).
Ok here is my html:
<!DOCTYPE html>
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Venues</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</div>
<h1 class="title">Venues</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<ion-view nng-controller="MyCtrl" title="home">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items">
<a href="#/venue/{{ item[0].id }}">
<div class="list card">
<div class="item item-avatar">
<img src="{{ item[0].profile_pic }}">
<h2 class="item-venue-title">{{ item[0].name }}</h2>
<p class="item-location">UK</p>
</div>
<div class="item item-body">
<img class="full-image" src="{{ item[0].heder_img }}">
</div>
</a>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</ion-view>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
<a class="tab-item">
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>
<i class="icon ion-leaf"></i>
</a>
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
</nav>
</ion-pane>
</body>
</html>
I have added the following to the .js file
var example=angular.module('ionic.example', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/home');
});
What I don't understand is how do you say this is the 'first' view so to speak.
Any advice would be appreciated.
the section
$urlRouterProvider.otherwise('/home');
would define the index route so in this case /home would be the first page.
The content of home.html is rendered inside the ion-nav-view, see below
<body ng-app="quote">
<!-- where the initial view template will be rendered -->
<div ng-controller="AppCtrl">
<ion-nav-view></ion-nav-view>
</div>
</body>
and the content for home.html goes inside the ion-content tag, see below
<ion-view title="your title">
<ion-content>
your content here
</ion-content>
</ion-view>
I done it by
<script type="text/ng-template" id="home.html">
<ion-view nng-controller="MyCtrl" title="home">
<!--content here--!>
</ion-view>
</script>
and in the js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/');
});