I am new in AngularJS and I am fetching a data from a Rest API, sample data is given below.
{
"error": false,
"videos": [
{
"video_category": "ABC Category",
"title": "Test Video",
"video_links": [
{
"id": 1,
"video_link": "https://www.youtube.com/embed/bNI4Jws68m0"
},
{
"id": 3,
"video_link": "https://www.youtube.com/embed/tB8tACPZ4pc"
}
],
"video_tags": [
{
"id": 1,
"name": "ABC Tag"
},
{
"id": 3,
"name": "DEC Tag"
}
]
},
{
"video_category": "XYZ Category",
"title": "My Test Video",
"video_links": [
{
"id": 2,
"video_link": "https://www.youtube.com/embed/6SS3tK1NMsE"
}
],
"video_tags": [
{
"id": 2,
"name": "GDF Tag"
}
]
}
],
"status_code": 200
}
My AngularJS code is below.
var myApp = angular.module('myApp', []);
myApp.
controller("AppController", function($scope, $http) {
var url = 'http://example.com/api/';
// Get Service for Free Education Page
$http.get(url+'my_api_url').
then(function(response) {
$scope.videos = response.data.videos;
});
});
My HTML Code is below.
<section ng-repeat="video in videos">
<h5>{{ video.video_category }}</h5>
<ul>
<li ng-repeat="links in video.video_links">
<div class="embed-responsive embed-responsive-16by9">
<object
data="{{ links.video_link }}">
<param name="movie" value="{{ links.video_link }}">
<param name="allowFullScreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" value="true"></param>
</object>
</div>
</li>
</ul>
<ul class="list-inline Tags">
<li ng-repeat="tag in video.video_tags">{{ tag.name }}</li>
</ul>
</section>
Now My Issue is that everything is work fine. but Allowfullscreen did not work. When I click on full screen option it is giving Full Screen is Unavailable I am trying but unfortunately unable to resolve this issue.
Really appreciated if anyone can help.
Thanks
Hi I am trying to alert the value of an expression in angularJs
I am quite new to angular and am just trying to work out how grab the value of the expression in an alert or in the console.
I am using AngularJs with json, below is my code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="menu in menus" id="{{menu.id}}" class="{{menu.cssClass}}">
<a ng-href="{{menu.content}}" ng-click="doGreeting(greeting)">{{menu.description}}</a>
<ul>
<li ng-repeat="submenu in menu.menu" id="{{submenu.id}}" class="{{submenu.cssClass}}">
<a ng-href="{{submenu.content}}" ng-click="ShowAlert()">{{submenu.description}}</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
JAVASCRIPT
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope", "$http", "$window",
function($scope, $http, $window) {
$http.get('menu.json')
.then(function(response) {
$scope.menus = response.data.menus; // response data
$scope.greeting = 'Hello, World!';
$scope.ShowAlert = function () {
$window.alert("{{menu.content}}");
}
});
}
]);
JSON
{
"menus":[
{
"id":"contact",
"leaf":true,
"description":"Contact Us",
"link":"",
"content":"contactUs.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"rules",
"leaf":false,
"description":"Sports Betting Rules",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"types",
"leaf":true,
"description":"Wager Types",
"link":"",
"content":"wagerTypes.html",
"cssClass":"static-content wager-types",
"menu":null
},
{
"id":"odds",
"leaf":true,
"description":"Odds & Lines",
"link":"",
"content":"oddsAndLines.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"policies",
"leaf":true,
"description":"Rules & Policies",
"link":"",
"content":"rulesAndPolicies.html",
"cssClass":"static-content rules-policies",
"menu":null
},
{
"id":"bonuses",
"leaf":true,
"description":"Sports Bonuses",
"link":"",
"content":"sportsBonuses.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"conditions",
"leaf":false,
"description":"Terms & Conditions",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"termsOfService",
"leaf":true,
"description":"Terms of Service",
"link":"",
"content":"termsOfService.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"privacy",
"leaf":true,
"description":"Privacy Policy",
"link":"",
"content":"privacy.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"view",
"leaf":true,
"description":"View in: Mobile | Full Site",
"link":"",
"content":"view.html",
"cssClass":"static-content",
"menu":null
}
]
}
Pass the model variable to the function and then print it,
<li ng-repeat="submenu in menu.menu" id="{{submenu.id}}" class="{{submenu.cssClass}}">
<a ng-href="{{submenu.content}}" ng-click="ShowAlert(submenu)">{{submenu.description}}</a>
</li>
Controller.js
$scope.ShowAlert = function (val) {
$window.alert(val);
}
Demo
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.ShowAlert = function (val) {
alert(val.content);
}
$scope.menus =
[{
"id": "contact",
"leaf": true,
"description": "Contact Us",
"link": "",
"content": "contactUs.html",
"cssClass": "static-content",
"menu": null
}, {
"id": "rules",
"leaf": false,
"description": "Sports Betting Rules",
"link": "",
"content": "",
"cssClass": "",
"menu": [{
"id": "types",
"leaf": true,
"description": "Wager Types",
"link": "",
"content": "wagerTypes.html",
"cssClass": "static-content wager-types",
"menu": null
}, {
"id": "odds",
"leaf": true,
"description": "Odds & Lines",
"link": "",
"content": "oddsAndLines.html",
"cssClass": "static-content",
"menu": null
}, {
"id": "policies",
"leaf": true,
"description": "Rules & Policies",
"link": "",
"content": "rulesAndPolicies.html",
"cssClass": "static-content rules-policies",
"menu": null
}, {
"id": "bonuses",
"leaf": true,
"description": "Sports Bonuses",
"link": "",
"content": "sportsBonuses.html",
"cssClass": "static-content",
"menu": null
}]
}, {
"id": "conditions",
"leaf": false,
"description": "Terms & Conditions",
"link": "",
"content": "",
"cssClass": "",
"menu": [{
"id": "termsOfService",
"leaf": true,
"description": "Terms of Service",
"link": "",
"content": "termsOfService.html",
"cssClass": "static-content",
"menu": null
}, {
"id": "privacy",
"leaf": true,
"description": "Privacy Policy",
"link": "",
"content": "privacy.html",
"cssClass": "static-content",
"menu": null
}]
}, {
"id": "view",
"leaf": true,
"description": "View in: Mobile | Full Site",
"link": "",
"content": "view.html",
"cssClass": "static-content",
"menu": null
}]
; // response data
}
]);
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="bootstrap#3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="menu in menus" id="{{artist.id}}">
<a ng-href="{{menu.content}}">{{menu.description}}</a>
<ul>
<li ng-repeat="submenu in menu.menu">
<a ng-href="{{submenu.content}}" ng-click="ShowAlert(submenu)">{{submenu.description}}</a>
</ul>
</li>
</ul>
</div>
</body>
</html>
Concerning $window.alert("{{menu.content}}");, Angular does not auto-magically evaluate expressions in all of JavaScript - it'll only evaluate expressions passed to it in templates. These get passed to something like $compile, which actually compiles the expression.
You can do something like this using $scope.$eval (which is not as evil as it sounds). That might look something like this:
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope", "$http", "$window",
function($scope, $http, $window) {
$http.get('menu.json')
.then(function(response) {
$scope.menus = response.data.menus; // response data
$scope.greeting = 'Hello, World!';
$scope.ShowAlert = function () {
var alert = $scope.$eval('menu.content')
$window.alert(alert);
}
});
}
]);
Alternatively, you could evaluate the expression inside of the HTML (which is what I would suggest, and what #Sajeetharan posted above, so I won't replicate it here).
Note that Angular 1.5+ discourages the use of controllers in this manner because they do not exist in this form in Angular 2.0. I'd highly recommend porting this code to use components instead. You'd have a few components; one for the ListCtrl, one for each menu, and one for each submenu.
Here is the code
APP.js
.state('app.aboutus', {
url: '/aboutus',
views: {
'mainContent': {
templateUrl: 'templates/aboutus.html',
controller: 'AboutController',
resolve: {
leaders: ['corporateFactory', function(corporateFactory){
return corporateFactory.query();
}]
}
}
}
})
Controller.js
.controller('AboutController', ['$scope', 'leaders', 'baseURL', function($scope, leaders, baseURL) {
$scope.baseURL = baseURL;
$scope.showLeaders = false;
$scope.message="Loading ...";
$scope.leaders = leaders;
console.log($scope.leaders);
}])
Aboutus.html
<ion-view view-title="About Us">
<ion-content>
<div class="card">
<div class="list list-inset">
<div ng-repeat="leaders in leadership" class="item item-avatar item-text-wrap">
<h2>{{leaders.name}}</h2>
<h4>{{leaders.designation}}</h4>
</div>
</div>
</div>
</ion-content>
</ion-view>
db.json
"leadership": [
{
"id": 0,
"name": "Human 1",
"designation": "Chief Executive Officer"
},
{
"id": 1,
"name": "Human 2",
"designation": "Chief Food Officer"
},
{
"id": 2,
"name": "Human 3",
"designation": "Chief Taste Officer"
},
{
"id": 3,
"name": "Human 4",
"designation": "Executive Chef"
}
]
When I checked using inspect element - console tab in Google Chrome, the $resolved: has successfully changed from false into true, and every array contain the information per ID.
But, the data didn't show in the aboutus.html
Did I typed something wrong? or maybe I'm using a wrong method?
Thank you in advance!
Your problem is likely that your ng-repeat syntax is incorrect. Where you have leadership, that should be the object/array you're referencing in your scope. So try changing it to this:
<div ng-repeat="leader in leaders" class="item item-avatar item-text-wrap">
<h2>{{leader.name}}</h2>
<h4>{{leader.designation}}</h4>
</div>
I have a JSON data in the format
[
{
"_1": {
"id": 4,
"cost": 45.0,
"measure": 4,
"NoOfUnits": 677,
"hours": null
},
"_2": {
"id": 1,
"name": "Truck",
"description": "Test"
}
},
{
"_1": {
"id": 1,
"cost": 1120.0,
"measure": 1,
"NoOfUnits": 500,
"hours": null
},
"_2": {
"id": 7,
"name": "PC300",
"description": null
}
},
]
I'm not able to display the data that I have store in a $scope variable say
$scope.result
This is my ng repeat functionality
<div ng-repeat="data in result">{{data.name}}{{data.description}}</div>
your $scope.result is contains 2 objects, with in one object u have set of object properties like _1,_2 , and then these properties are again objects like
"_1": {
"id": 4,
"cost": 45.0,
"measure": 4,
"NoOfUnits": 677,
"hours": null
}
, then u have the properties u need to print.
<ul>
<li ng-repeat="x in result"> // repeats objects
<ul ng-repeat="obj in x"> // repeat object properties '_1',"_2" , these are again objects
{{obj.name}}{{obj.description}}
<ul>
</li>
</ul>
With your data structure... You cannot access name and description directly from first ng-repeat.
Even if you have nested ng-repeat you are not guaranteed with name and description. You need to flatten the object after first ng-repeat and then you can access all the properties. Assuming that _1, _2 object properties are related.
Two loops are required---
<div ng-repeat="data in result">
<div ng-repeat="obj in data">
{{obj.cost}}{{obj.name}}
</div>
</div>
Demo: http://jsfiddle.net/HB7LU/8254/
I am getting json object from an external url.
$http.get('http://dev-newsbackend.gotpantheon.com/articles')
.success(function(data, status){
$scope.articles = data.articles;
console.log(data.articles);
}).error(function(err){
console.log(err);
})
})
The json I get is as below:
{
"articles": [
{
"single": {
"title": "7 Tech Upgrades to the Old-School Science Class"
}
},
{
"single": {
"title": "What Will the ALS Association Do With That $100 Million?"
}
},
{
"single": {
"title": "President Obama Rocked a Tan Suit, So Twitter Went Nuts"
}
}
],
"view": {
"name": "articles",
"display": "page",
"path": "articles",
"root": "articles",
"child": "single",
"pages": 1,
"page": 0,
"count": 3,
"limit": 10
}
}
However, when I am doing a ng-repeat though the element is printed multiple times. Am not getting the value.
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{ single.title }}</ion-item>
</ion-list>
My developer console screen-shot:
This is what I got for console.log(data.articles);
The screen-shot of my browser where am getting the list without the title value:
Try this:
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{article.single.title }}</ion-item>
</ion-list>