I have small JSON data from server and wanted to show in html file. unfortunately not working. Any idea?
I have invested couple of hours to find these. but still not found.. :(
Thanks for your feedback.
JS File:
(function() {
var app = angular.module('myreddit', ['ionic']);
app.controller('RedditCtrl', function($scope, $http) {
$scope.conditions = [];
$http.get('http://50wave.com/deesh.json')
.success(function(response) {
angular.forEach(response.ht, function(child) {
$scope.stories.push(child);
});
});
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
}());
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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myreddit" ng-controller="RedditCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">FootBall</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div ng-repeat="condition in conditions">
{{conditions.name}}
</div>
</ion-content>
</ion-pane>
</body>
</html>
Thanks for your feedback.
There might be more issues with your application, you did not provide enough data to troubleshoot, but from the code you have posted I see at least these 2:
1 you are pushing to stories array, which doesn't seem to be read in your application. I think it should be:
$http.get('http://50wave.com/deesh.json')
.success(function(response) {
angular.forEach(response.ht, function(child) {
$scope.conditions.push(child);
});
});
2 when inside ng-repeat cycle, you should be addressing the item, not the collection, so not {{conditions.name}} but {{condition.name}}, so the code should be:
<div ng-repeat="condition in conditions">
{{condition.name}}
</div>
Related
I am implementing a simple routing app in polymer.js using iron-pages and page.js but this is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="routes.html">
<title>Document</title>
</head>
<body>
<div is="dom-bind" id="app">
<a data-route="home" href="/">home</a>
<a data-route="users" href="/users">users</a>
<a data-route="settings" href="/settings">settings</a>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">Home</section>
<section data-route="users">Users</section>
<section data-route="settings">Settings</section>
</iron-pages>
</div>
</body>
</html>
<script src="/bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
page('/', function() {
app.route = 'home'
console.log(app.route)
// console.log('home')
})
page('/users', function () {
app.route = 'users'
})
page('/settings', function () {
app.route = 'settings'
})
page({
hashbang: false
})
})
</script>
Everything seems okay but this is not working.
At first, you should NOT use iron-pages in index.html.. It's much more easier and in future of your application also necessary to create new element where is located all the structure logic (routing, some popup elements etc...).
Dom-bind is only temporary solution. Your code seems ok and there should be no problem.
I assume you have your .htaccess configured as it is necessary to have it when using page.js
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I have a basic Ionic App and would like to apply one of three different style sheets based on a User Input.
The page will be pre-loaded with the basic style, then a user can select two other options, so far the original style is loaded and I can console log a change in the variable, but the page is not updated. Here is my code:
HTML INDEX:
<!DOCTYPE html>
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link ng-href="{{style}}" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-controller='SettingsCtrl'>
<ion-nav-view></ion-nav-view>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
</body>
</html>
HTML VIEW:
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Accessibility Views
</div>
<select ng-model='option' ng-change='changeView(option)'>
<option ng-selected='style'>Plain</option>
<option>Larger Text</option>
<option>Inverted Colours</option>
</select>
</label>
</div>
CONTROLLER:
.controller('SettingsCtrl', function($scope, Settings) {
$scope.style = Settings.style;
$scope.changeView = function(newView) {
Settings.changeView(newView);
};
})
SERVICE:
.factory('Settings', function() {
var defaultStyle = 'lib/ionic/css/ionic.css';
var styles = { 'Plain': defaultStyle,
'Larger Text': 'lib/ionic/css/ionic-large.app.css',
'Inverted Colours': 'lib/ionic/css/ionic-invert.app.css' }
var o = { notifications: false, frequency: 'Daily', style: defaultStyle };
o.changeView = function(newView) {
o.style = styles[newView];
};
)}
Any help would be greatly appreciated.
HTML tag has SettingsCtrl as well BODY tag. Remove one of them.
Also the style seems to be changing only on the factory. style in the scope of SettingsCtrl is not changed. So you can make the changeView return style and assign it to the style variable in the scope.
o.changeView = function(newView) {
o.style = styles[newView];
return o.style
};
And then in controller:
$scope.changeView = function(newView) {
$scope.style = Settings.changeView(newView);
};
Not sure if this is what you had in mind but I got it to work with the following code:
Controller:
$scope.settings = Settings;
HTML:
<link ng-href="{{settings.style}}" rel="stylesheet">
I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
Here my code:
<!DOCTYPE html>
<html>
<head>
<script src="/client/polymer-0.5.2/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link href="/client/polymer-0.5.2/bower_components/polymer/polymer.html" rel="import">
<link href="/client/polymer-0.5.2/bower_components/core-ajax/core-ajax.html" rel="import">
</head>
<body>
<core-ajax id="directorInfoAjax" url="/main.ashx?action=directorInfo" handleAs="text" on-core-response="callback">
<script>
Polymer(
{
callback: function ()
{
var bp = this.response;
}
});
</script>
</core-ajax>
<script>
document.addEventListener('polymer-ready', function()
{
document.querySelector("#directorInfoAjax").go();
});
</script>
</body>
</html>
What wrong? Call back not fire.
111111111111111111111111111111111111
222222222222222222222222222222222222
333333333333333333333333333333333333
As far as I know, you aren't using <core-ajax> as it should be used.
Here you have a working example for <core-ajax>:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>seed-element Demo</title>
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/components/core-elements/core-elements.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-elements/paper-elements.html">
</head>
<body>
<core-ajax id="directorInfoAjax" url="http://echo.jsontest.com/key/value" handleAs="text" on-core-response="{{callback}}"></core-ajax>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response", function(e) {
alert("I received a response "+ this.response);
console.log(this.response);
}
);
ajax.go(); // Call its API methods.
});
</script>
</body>
</html>
In your code, the Polyymer declaration inside the component doesn't seem to work, and even if it worked, the callback function need to be wrapped in {{ }}.
A Plunker here: http://plnkr.co/edit/rOuNPu99D7ROX4ewbLnK?p=preview
I hope it helps, but if not, don't hesitate to ask for further information!
[EDIT] I wrote a simpler example
Check the below tutorial it might help you to figure out the issue:-
http://www.tutorialsavvy.com/2014/07/understanding-polymer-core-ajax-element.html