Today I started fiddling with AngularJS for school. Almost instantly I got to a problem I cannot fix, and solutions on the internet did not help me.
I use a angular-seed project as skeleton of my project.
This results in two files in particular: the app.js and the view1.js which contains the controller I am using in my view1.html.
The idea is that I need to have an array of items that I can use globally on multiple views, so not necessarily only on view 1.
I made a controllers.js with the following content:
var todoAppControllers = angular.module('CarControllers', []);
todoAppControllers.controller('CarListController', ['$scope', '$http',
function($scope, $http) {
$scope.cars = [
{merk:'volkswagen', model : 'Up'},
{merk:'volkswagen', model : 'Golf'}
];
}]);
My html looks like this on the main index.html (I've ommitted some irrelevant code):
<html lang="en" ng-app="carApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
</body>
</html>
My app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('carApp', [
'ngRoute',
'carApp.view1',
'CarControllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
And finally the page where I want to show my list of cars. Not that this is a partialview:
<p>Cars:</p>
<ul ng-controller="CarListController">
<li ng-repeat"car in cars">{{car.merk}} model: {{car.model}}</li>
</ul>
When I run npm and go to the application, I only see one bulletpoint (list item) with only model: (so no merk which is brand in Dutch nor the car.model).
How can I solve this? Thanks in advance
You have this:
<li ng-repeat"car in cars">
You're missing an equal symbol:
<li ng-repeat="car in cars">
Related
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'm a beginner with AngularJs, this is my first try
I'm trying ti display data from a json link, and some fields contains html
Here is the json content :
[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}]
And i use this angularJs code to display the data
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{x.titre}}
{{x.description}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("JSONLINK")
.success(function (response) {$scope.names = response;});
});
</script>
The problem is, the field description is displayed as is in the json :
- Titre18 <p>test</p>
- Titre18f <p>sdfsdfsd</p>
Is it possible to format this field as html ? I want the p tags to be interpreted as html
I use angularJs 1.3.15
Thanks a lot
Try this:
<ul>
<li ng-repeat="x in names" ng-bind-html="x.description">
{{x.titre}}
{{x.description}}
</li>
</ul>
Now notice ng-bind-html will evaluate the HTML in 'description' contents and render it 'safely', there is also ng-bind-html-unsafe if you want to bypass Angular's sanitize method. But be careful when using those, considering a wrong '>' symbol can break your entire page.
You also need to add a dependency on ngSanitize on your module.
angular.module('yourmodule', ['ngSanitize']);
Requires angular-sanitize.js
docs: https://docs.angularjs.org/api/ngSanitize
And here is documentation for bind-html
https://docs.angularjs.org/api/ng/directive/ngBindHtml
here is link to the code at plunker.a link!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example62-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="bindHtmlExample" >
<div ng-controller="ExampleController">
<ul>
<li ng-repeat="x in names" ng-bind-html="x.description">
{{x.titre}}
{{x.description}}
</li>
</ul>
</div>
</body>
</html>
in script.js
(function(angular) {
'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.names =[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}];
}]);
})(window.angular);
Here you will see p tags are interpreted as html not as string.Hope this will help you
If I understand right, you want to strip the tags around the description text. See this link : angularjs to output plain text instead of html
So I have this json file I need to process:
http://pastebin.com/6aYkTjsw
I'm trying to make 1 single select dropdown menu for each entry in links array for each version. So basically 2 entries should be added to the select dropdown menu for each version (one for windows and one for linux).
However, i'm failing as its making a select element for each version. I can't add another ng-repeat within the select statement so I am a bit confused on how I can accomplish this. I've tinkered around with ng-options and other things but couldn't manage to get it to work.
Here is the current implementation:
http://plnkr.co/edit/TenmOPpXef85KAowXbTx?p=preview
Code:
index.html
<!-- Algorithmic Trading © -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Algorithmic Trading - Revitpo Inc</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="appDownload">
<div ng-controller="VersionController">
<!-- Drop Down Menu -->
<div ng-repeat="x in deployments">
<select>
<option ng-repeat="y in x.links" value="{{y.link}}">{{x.short_descr}} ({{y.os}})</option>
</select>
</div>
</div>
<tt>Copyright © 2015. Revitpo Inc. All Rights Reserved.</tt>
</body>
</html>
app.js
var app = angular.module("appDownload", []);
app.controller("VersionController", function($scope, $http) {
$http.get('http://algorithmictrading.azurewebsites.net/json/versions.json').
success(function(data, status, headers, config) {
$scope.deployments = data;
});
});
I solved my issue. (Actually icebox from freenode irc in #angularjs solved it for me).
This is what I ended up using:
index.html
<!-- Algorithmic Trading © -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Algorithmic Trading - Revitpo Inc</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="appDownload">
<div ng-controller="VersionController">
<!-- Drop Down Menu -->
<select>
<option ng-repeat="deployment in deployments" value="{{deployment.link}}">{{deployment.short_descr}} ({{deployment.os}})</option>
</select>
</div>
<tt>Copyright © 2015. Revitpo Inc. All Rights Reserved.</tt>
</body>
</html>
app.js
var app = angular.module("appDownload", []);
app.controller("VersionController", function($scope, $http) {
$scope.deployments = [];
//Retrieve all build versions
$http.get('json/versions.json').
success(function(data, status, headers, config) {
//Push required fields onto array
data.forEach(function(item1) {
item1.links.forEach(function(item2) {
$scope.deployments.push({
short_descr: item1.short_descr,
link: item2.link,
os: item2.os
});
});
})
});
});
We're looking for the best way to pull an API from Kimono Labs and how to structure properly. PLUNKER
Here is what we have in the app.js
var App = angular.module('App', []);
App.controller('Calendar', function($scope, $http) {
$http.get('http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback')
.then(function(res){
$scope.events = res.data[0].events;
});
});
index...
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
<script src="app.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// do something with the data
// please make sure the scope of this function is global
}
$.ajax({
"url":"http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
</head>
<body ng-controller="Calendar">
<ul>
<li ng-repeat="item in events">
<h1>{{item.EventTitles.text}}</h1>
<img src="{{item.HeadlineImages.src}}">
<p>{{item.eventdescription}}</p>
</li>
</ul>
</body>
</html>
Are we doing this correctly? We can get it to pull data from a local .json file... but not from Kimono?
Any help or a point in the right direction would be appreciated. Thank you for your time.
EDIT: I forgot to mention, I am aware of the API link from Kimono Labs I included does not work, this is intentional.
EDIT2: Added a PLUNKER if that helps anyone.
Kimono actually has a tutorial for calling your API with Angular.js. You can take a look at it through their docs at: https://help.kimonolabs.com/hc/en-us/articles/204380310-Tutorial-Calling-Kimono-with-AngularJS-
They also have pretty solid support if you email or chat them, in my experience.
Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup
<li>some list</li>
and I would like to project this one in DOM, trying
<ul>{{myscopevariable}}</ul>
but I get just the raw text
with php would be like <ul><?= myscopevariable ?></ul>
JS
angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
$scope.someHTML = "<li>just testing</li>";
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<ul ng-bind-html="someHTML">
</ul>
</body>
</html>
http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview
Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.
In your example:
<ul>some list</list>
<li ng-bind-html='myscopevariable'></li>
....
</ul>
You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)
See this plunker example for some working code.