AngularJS ng-repeat not showing items - html

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

how to bind angular components with ui-router

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.

Format html from json

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

Creating a single select dropdown menu from a JSON file

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
});
});
})
});
});

How to pull an API from Kimono

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.

Angular HTML markup in scope

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.