Creating a single select dropdown menu from a JSON file - json

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

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.

angular2 google map marker mouse enter and leave event

I am using angular2 google map.I want to open a Info window on mouseenter and need to close on mouseleave of marker.
http://embed.plnkr.co/YX7W20/
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/es6-shim#0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
I guess it should work for you:
const baseAddEventListeners = (<any>SebmGoogleMapMarker.prototype)._addEventListeners;
(<any>SebmGoogleMapMarker.prototype)._addEventListeners = function() {
this._markerManager.createEventObservable('mouseover', this)
.subscribe(() => { this._infoWindow.open(); });
this._markerManager.createEventObservable('mouseout', this)
.subscribe(() => { this._infoWindow.close(); });
baseAddEventListeners.call(this);
}
See also Plunkr

AngularJS ng-repeat not showing items

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">

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.

How to display emoji using angularJs?

I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this