This is the code which i have in my controller..I have used 2 elements in the json and passed it to scope.
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Service</title>
<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="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-material.min.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 ng-app="starter">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
There is not output comes in the html page, searched all examples and stackoverflow solutions, but i can't find the exact solutions guys, Please help me guys..
You have array in array at $scope.response
just use only one array
$scope.response= [{...},{...}]
or chose first element in array at template (if you cant change $scope.response)
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Service</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.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="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.jss"></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 ng-app="starter">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
It's because response is an array of an array not just a single dimension array get rid of the extra angle brackets:
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
{
"VisitName":"Brand",
"ClientName":" Software Solutions",
"POC":"Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}
];
});
Related
I am totally new to angularjs. I am just trying to load an external javascript file using requirejs. I have tried something but its not helping me.
Here is my folder structure:
angular-seed
-app
-bowercomponents
-requirejs
-view1
-view1.html
-view1.js
-view1test1.js
I want to load view1test1.js file in my view1.html
Here is my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script data-main="/app" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
Here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
g(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
requirejs(["view1/view1test1.js"], function(util) {
});
Here is my view1test1.js:
function(util){
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
}
I found some examples in which they have used some dependency, but i didn't understand it. So can anybody tell me what i am doing wrong?
Goole chrome is giving this error
http://localhost:63342/an1/images/%7B%7Bitem.image%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)
But I am able to see "left image" fine when the app is run.
//---mainMenu.json----------------------------------------
[
{
"name": "item1",
"image": "abc"
},
{
"name": "item2",
"image": "abc"
},
{
"name": "item3",
"image": "abc"
}
]
//---index.html----------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/an1/">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<main ng-view></main>
</body>
</html>
//---mainMenu.html----------------------------------------
<section class="mainMenu">
<ul>
<li ng-repeat="item in menuItems" ng-click="mainMenuSelection(item.name)">
<image src="images/{{item.image}}.png"></image>
{{item.name}}
</li>
</ul>
</section>
The browser is trying to load your unparsed template variable as a url before the desired item.image value is substituted in.
You can fix this by using ng-src instead of src on your image tag: https://docs.angularjs.org/api/ng/directive/ngSrc.
I added the google map plugin to my project with this command:
cordova plugin add cordova-plugin-geolocation
after i use this tutorial http://codepen.io/ionic/pen/uzngt ,i use in my page index.html but when i move this code in other page this code is dosen't worked
in the page index.html
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<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>
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
cordova script (this will be a 404 during development)
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/ngStorage.min.js"></script>
your app's js
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/Controllers/inscription.js"></script>
<script src="js/Controllers/Categories.js"></script>
<script src="js/Controllers/SousCategories.js"></script>
<script src="js/Controllers/Evenement.js"></script>
<script src="js/Controllers/RechercheEvent.js"></script>
<script src="js/service/services.js"></script>
google maps javascript
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>
<body ng-controller="carteController">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
in the page carte.html
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<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>
<script src="../lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="../js/ng-cordova-oauth.min.js"></script>
<script src="../js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="../js/ngStorage.min.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
<script src="../js/services.js"></script>
<!-- google maps javascript -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>
<body ng-controller="carteController">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
my controller app.js
facebookExample.controller('carteController', function($scope, $ionicLoading,$cordovaGeolocation,$compile) {
function initialize() {
console.log("fonction googleMap");
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
my error:
I'm brand new to using Angular JS so forgive me if this is a basic question. I'm having problems using the date picker add on with Angular Schema Form (http://schemaform.io) I've followed the instructions on the datepicker github page, but I simply can't get a datepicker to display on my page. Here is a snippet of the code I've been using. Can anyone help or suggest any mistakes I've made?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unilever Data Centre Site Survey</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/jscript" src="bower_components/jquery-2.1.4.min.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.date.js"></script>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.css"> </link>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.date.css"> </link>
</head>
<body ng-app="test" ng-controller="TestCtrl">
<nav class="navbar navbar-default"> </nav>
<div style="width:950px;" class="container-fluid">
<div ng-controller="TestCtrl">
<form name="test" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(test,modelData)">
</form>
<h3>Model</h3>
<div>{{prettyModel}}</div>
<script>
angular.module('test',['schemaForm']).controller('TestCtrl', function($scope,$http){
$scope.schema = {
"type": "object",
"properties": {
"birthDate": {
"title": "Bday",
"type": "string",
"format": "date"
},
$scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
},
$scope.model = {};
$scope.$watch('model', function(value){
if (value) {
$scope.prettyModel = JSON.stringify(value, undefined, 2);
}
}, true);
})
</script>
</div>
</body>
It's don't work because Textalk/angular-schema-form-datepicker is missing.
You need to install angular-schema-form-datepicker
https://github.com/Textalk/angular-schema-form-datepicker
So I have this simple code in angular that works on jsfiddle as you can see by pressing Run code snippet:
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact += 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div>{{ contact }}</div>
</div>
But when I try to use it in my Ionic app, it doesn't work. This is my complete index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<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>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body id="body">
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
<script>
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact+=1;
}
}
</script>
</body>
</html>
Can anyone please tell me what I need to include in index.html in order for angular to work?
yes you need to initialize your app. in your app.js file you should see
angular.module('starter', ['ionic'])
so in your index.html you have ng-app=""
that needs to say
ng-app="starter"
You're html should look like this:
<div ng-app="starter" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
right now nothing is being bootstrapped and angular is not being attached to the page.