I am developing a site in angular js, i am uploading vimeo(https://vimeo.com/) or youtube video url. For this i have to show a thumbnail on my listing so is it possible to show preview of a video url using angular js.
Thank You
You can do this using ng-repeat,
var app = angular.module('myApp', []);
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
});
app.controller('videoController', ['$scope',
function MyCtrl($scope) {
$scope.product = [{
name: 'some name',
description: 'some description',
media: [{
src: 'v5Asedlj2cw'
}]
},
{
name: 'some name 2',
description: 'some description 2',
media: [{
src: 'v5Asedlj2cw'
}]
}
]
;
$scope.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
};
}
]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="videoController">
<div ng-repeat="media in product">
<div class="thumbnail">
<div class="video-container">
<iframe width="100%" ng-src="{{getIframeSrc(media.src)}}" frameborder="0 " allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
Related
I have a simple model with a list of names and corresponding images. I'm trying to click on the name of the image and load the corresponding image. I can't get the image to load. The list of names appears on the page, but when I click them nothing happens. Please help with code. Thx!
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel ="stylesheet" type "text/css" href ="clicker.css">
<script type = "text/javascript" src="Libs/angular.js"></script>
<script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>
<div ng-controller = "MainController">
<div ng-repeat = "cat in options.catList">
<h3 ng-click = "MainController.selectCat($index)">{{cat.name}}</h3>
<h3>{{MainController.selectedCat.name}}</h3>
<img ng-src = "{{MainController.selectedCat.images}}" >
</div>
</div>
</div>
</body>
</html>
JS
(function() {
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
$scope.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
],
};
vm.selectCat=function(pos) {
vm.selectedCat = angular.copy(vm.catList[pos]);
vm.selectedCat.pos = pos;
};
activate();
function activate() {
}
})
})();
You are mixing up $ scope and vm, go with one approach. You need to use controller as syntax in the template,
<div ng-controller = "MainController as vm">
DEMO
(function() {
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat = selectCat;
this.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<body>
<div ng-controller = "MainController as vm">
<div ng-repeat = "cat in vm.options.catList">
<h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>
<h3>{{vm.selectedCat.name}}</h3>
<img ng-src = "{{vm.selectedCat.images}}" >
</div>
</div>
</div>
</body>
</html>
in my main page i have a tabstrip which it's tab items loaded dynamically.but angularjs does not load related controller for tabitem.
my code is something like this:
var tabStripElement = $("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fade"
}
},
dataTextField: 'text',
dataContentField: 'content',
dataImageUrlField: 'dataImageUrl',
dataUrlField: 'url',
dataContentUrlField: 'contentUrl',
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.openTab()
{
tabStrip.append({
text: 'Title',
contentUrl: '/tabItem.html',
encoded: false
});
}
}])
.controller('TabController', ['$scope', function($scope){
}])
MainPage:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link href="~/Content/kendo/2016.1/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1/kendo.default.min.css" rel="stylesheet" />
</head>
<body ng-controller="MainController">
<div id="tabstrip" class="text-right">
</div>
<script src="~/Scripts/lib/jquery/jquery-1.12.0.js"></script>
<script src="~/Scripts/lib/angular/angular.js"></script>
<script src="~/Scripts/lib/angular/angular-resource.js"></script>
<script src="~/Scripts/lib/kendo/2016.1/kendo.all.min.js"></script>
<script src="~/Scripts/js/app.js"></script>
<script src="~/Scripts/js/controllers.js"></script>
</body>
</html>
and view for tab is something like this:
<div ng-controller="TabController">
<input type="text" />
</div>
I was writing a code in html5 and angular js. I am encountering a problem in passing parameters with space. Here is my code :
angular.module('MyApp', [])
controller('MyCtrl', function($scope) {
$scope.validate = function(description,code) {
alert(description,code);
}
});
<!DOCTYPE html>
<html>
<body ng-app="MyApp">
<div ng-repeat="x in allItem.items" class="col-75" ng-controller="MyCtrl">
<a href="#" ng-click="validate({{x.itemDesc}},{{x.itemCode}})">
<div class="card item center">{{x.itemName}}
</div></a>
</div>
</body>
</html>
The JSON format is like this
Json contains
allItem
{
items
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
}
{
itemName: "Tomato",
itemDescr: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
}
I am not able to pass the parameters. I don't know how to pass the text that contains spaces and quotes('). Can anyone help me
Your Json needs to be an array, skip the href="#" and you do not need to bind within ng-click. The code below is fully functioning and running.
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.allItem =
{
items:[
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
},
{
itemName: "Tomato",
itemDesc: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
]
};
$scope.validate = function(description, code) {
console.log(description,'-', code);
};
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<br/>
<div ng-repeat="x in allItem.items" class="col-75">
<a ng-click="validate(x.itemDesc, x.itemCode)">
<div class="card item center">{{x.itemName}}
</div>
</a>
</div>
</body>
</html>
I am not able to get the kendo-grid on my html screen. It does not shows any error but does not shows the outut as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="KendoDemos">
<h1>Customer list</h1>
<div ng-controller="CustomerController">
<!--<kendo-grid options="mainGridOptions">
</kendo-grid>-->
<div ng-controller="CustomerController" id="myKendoDemos" kendo-grid k-data-source="gridData" k-columns="gridColumns"></div>
</div>
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<!--<script src="Scripts/kendo/2014.2.716/kendo.grid.min.js"></script>
<script src="Scripts/kendo/2014.2.716/kendo.core.min.js"></script>-->
<script>
var app = angular.module("KendoDemos", ["ngRoute"]);
app.controller("CustomerController", function ($scope) {
$scope.gridData = [
{ customerId: 1, customerName: 'shikhar1' },
{ customerId: 2, customerName: 'shikhar2' },
{ customerId: 3, customerName: 'shikhar3' },
{ customerId: 4, customerName: 'shikhar4' }
//{
//dataSource: "http://localhost:58816/api/Values"
// }
];
$scope.gridColumns = [{
field: "customerId",
title: "customerId",
width: "120px"
}, {
field: "customerName",
title: "customerName",
width: "120px"
}];
});
</script>
</body>
</html>
First of all since you are using kendo-grid, k-data-source and k-columns which are directives, you need to add kendo.directives as an app dependency
var app = angular.module("KendoDemos", ["ngRoute", "kendo.directives"]);
Here's a Working Plunk of a Kendo Grid using your options. Hope this helps
I am faced with an issue that I cannot find a solution for.
So I am trying to create an application that will display tracks taken from soundcloud and display them on my page using the soundcloud embeded player. I will be using DjangoREST to create a JSON list of all the tracks I want displayed. The JSON will have an entry to store the embeded HTML and will be packaged up and sent to the AngularJS front end.
The problem I am facing is that I am unable to actually display the embeded HTML even after using ng-bind-html.
I created a small demo to demonstrate the issue I am facing.
app.js
(function(){
var app = angular.module("tracklist", []);
app.controller("TrackListController", function () {
this.tracks = soundcloudtracks;
});
// Very basic JSON track coming in from DjangoREST
var soundcloudtracks = [
{
title: 'Track1',
artist: 'Artist1',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
},
{
title: 'Test2',
artist: 'Artist2',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
},
]
})();
index.html
<!DOCTYPE html>
<html ng-app="tracklist">
<head>
</head>
<body>
<div>
<div ng-controller="TrackListController as tracklistcont">
<div ng-repeat="track in tracklistcont.tracks">
<h1>{{ track.title }} - {{ track.artist }} </h1>
<div ng-bind-html="track.html"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
From my understanding I need to $sanitize the incoming HTML but I don't know how to properly sanitize each element within an ng-repeat. Could anyone help me out? I am completely lost at this point.
Thanks for your time.
Ok so I believe I was able to resolve the issue. I just created a method to sanitize my html.
app.js
(function(){
var app = angular.module("tracklist", ['ngSanitize']);
app.controller("TrackListController", ['$scope', '$sce', function($scope, $sce) {
this.tracks = soundcloudtracks;
$scope.deliberatelyTrustDangerousSnippet = function(html) {
return $sce.trustAsHtml(html);
};
}]);
// Very basic JSON track coming in from DjangoREST
var soundcloudtracks = [
{
title: 'Track1',
artist: 'Artist1',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
url: 'http://soundcloud.com/forss/flickermood',
},
{
title: 'Test2',
artist: 'Artist2',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
url: 'http://soundcloud.com/forss/flickermood',
},
]
})();
index.html
<!DOCTYPE html>
<html ng-app="tracklist">
<head>
</head>
<body>
<div>
<div ng-controller="TrackListController as tracklistcont">
<div ng-repeat="track in tracklistcont.tracks">
<h1>{{ track.title }} - {{ track.artist }} </h1>
<div ng-bind-html="deliberatelyTrustDangerousSnippet(track.html)"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-sanitize.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Now everything is working as expected!