This is my HTML code :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/jsonCntrl.js"></script>
</head>
<body ng-controller="myCntrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Items List</h1>
</ion-header-bar>
<ion-content>
<ion-list >
<ion-item ng-repeat="item in myData">
{{ item.Name }}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
This is my Controller Code :
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function(response){
$scope.myData = response.data.records;
});
});
I am not getting a list view instead something like this
List response Link
But when i use the same code to populate data from an array its working fine.
Try this:
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http
.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.myData = angular.fromJson(response.data.records);
});
});
Use the same code you have and check the styles of .item class in ionic.css file with the line of 5646 else override that class with below style
border-color: #ddd;
background-color: #fff;
color: #444;
position: relative;
z-index: 2;
display: block;
margin: -1px;
padding: 16px;
border-width: 1px;
border-style: solid;
font-size: 16px;
Related
I have simple scenario but still, doesn't work..:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Custom-->
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="/js/lodash.js"></script>
<script type="text/javascript" src="/js/angular.js"></script>
<script type="text/javascript" src="/js/angular-simple-logger.js"></script>
<script type="text/javascript" src="/js/angular-google-maps.js"></script>
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
<script type="text/javascript" src="/js/app/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="/js/app/controllers/MainController.js"></script>
</head>
<body ng-controller="MainController">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</body>
</html>
app.js
var myapp = angular.module('myapp', ['uiGmapgoogle-maps']);
myapp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'MY_API_KEY',
// v: '3.28',
libraries: 'weather,geometry,visualization'
});
});
MainController.js
myapp.controller("MainController",function ($scope,uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function (maps) {
$scope.maps = maps;
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 10 };
});
});
style.css
ui-gmap-google-map{
border: 1px dashed darkred;
width: 500px;
height: 300px;
display: inline-block;
}
.angular-google-map-container {
width: 400px;
height: 400px;
}
No errors in the console. The css is applying ok, the promise in the controller is working ok but no map is displayed.
The fact that the DOM is staying like that is bothering me :
<ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>
because on the example site I saw that angular is changing it like that :
<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container">
</div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>
(or something like that)
Any idea what am I doing wrong ?
Since your map is loading inside a promise, try using ng-if to render it conditionally (as specified here):
<ui-gmap-google-map ng-if='map.center'
center='map.center'
zoom='map.zoom'>
</ui-gmap-google-map>
Working demo here.
I found what is the problem, its because I have also included
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
After removing it, everything starts working normal.
I tried adding angular-carousel in my application and I am getting this error
Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355
I got this error only after adding ngMaterial in my application with carousel. I am using latest stable version 1.5.8 of angularjs. This is my code I tried until now,
<!DOCTYPE html>
<html ng-app="DemoApp">
<head>
<meta charset="UTF-8">
<title>angular-carousel demo</title>
<meta name="viewport" content="width=620, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/angular-material.min.css">
<link href='css/angular-carousel.min.css' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="DemoCtrl">
<style type="text/css">
.selected
{
background-color: red;
}
.demo
{
height: 500px;
width: 100%;
}
.carousel5
{
height: 500px !important;
width: 100% !important;
}
</style>
<div class="demo" >
<ul rn-carousel rn-carousel-index="carouselIndex6" rn-carousel-deep-watch rn-carousel-buffered class="carousel5">
<li><div style="height:500px;width:100%;background-color:blue;"></div></li>
<li><div style="height:500px;width:100%;background-color:cyan;"></div></li>
<li><div style="height:500px;width:100%;background-color:grey;"></div></li>
<li><div style="height:500px;width:100%;background-color:yellow;"></div></li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-touch.js"></script>
<script src="js/angular-carousel.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script>
angular.module('DemoApp', [
'ngMaterial','angular-carousel'
]).controller('DemoCtrl', function($scope) {});
</script>
</html>
Am I wrong by someway?. Can someone please help me?
First Include All Dependencies
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
Than include Angular Material JS file
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
Looks like to don't include the ngMaterial js files
Here i created for simple form with validation, my requirement is i dont want html5 popup message but i need focus for particular valid field, how to do ?
Thanks for ur help in advanced .............................................
'use strict';
var app = angular.module('telstraApp', []);
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TelsApp</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!--<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">
<script data-require="angular.js#~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="telstraApp">
<div class="wrapper">
<div class="row" style=" position: relative; top: 0; height: 55px !important;z-index:9999;">
</div>
<!--<div id="header" ng-include="'layout/header/header.html'" ></div> -->
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar" style=" height: 100%; top: 10px; height:0px; padding-top: 60px;">
</aside>
<div class="content-wrapper" style=" margin-top: -29px; margin-bottom: 10px; height: 350px; overflow-y: auto; ">
<!-- Main content -->
<form>
<input type="text" ng-required="true">
<input type="text" ng-required="false">
<input type="text" ng-required="true">
<input type="submit">
</form>
<!-- /.content -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- /.Footer -->
<!-- /.Footer -->
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
<style>
.appBanner{
position:fixed; left:0; top: 0px; width: 1440px; border:2px; background-color:#6185BA;height: 46px;color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;font-size: 12px;
}
</style>
In order to hide html5 validation messages, you have to specify novalidate on your form like this:
<form name='xyz' novalidate>
//your form
</form>
Read more about it here: disable html5 validations
You will have to specify autofocus on the input on which you want focus.
have a look at this fiddle where focus is on email input. focus with novolidate
I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>
could you please tell me how to make button of same size (or same height).Actually I have four buttons and a toggle button in one row I need their height should same as shown in image .I need to decrease height of toggle button .can we make same like that as show in image
here is my code
.margin_button_bar{
margin-left: -0.5em!important;
padding:0.5em!important;
}
.button_tab{
position: relative;
}
.toggle_button{
position: absolute!important; right: 0px!important;
display: inline;
border: none;
background: transparent;
paddig:0.5em!important;
}
can we reduce toggle button height ?
you can change the height of the toggle track (the part the toggle slides along) by chaning the .toggle .track {} class and you can change the handle (the part that moves) in the .toggle .handle {} class: or in your ion toggle you can just apply toggle-small as a class so it looks like <ion-toggle class="toggle-small">
see this play ground and play with the css http://play.ionic.io/app/46f56cb9e30d
code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
</ion-content>
</ion-pane>
</body>
</html>
CSS:
/* Styles here */
.toggle .track {
height: 20px;
}
.toggle .handle {
height: 20px;
}
JS:
angular.module('app', ['ionic']);