Im getting : Blocked loading resource from url not allowed by $sceDelegate policy. URL: //www.youtube.com/embed/61aM0DXpKkc on the following
<!DOCTYPE html>
<html >
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Title }}</td>
<td>
<iframe class="youtube-player" ng-src="{{'//www.youtube.com/embed/' + x.URL}}" frameborder="0" allowfullscreen></iframe>
</td>
<td>{{ x.URL }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://angular.webiflex.co.uk/connect.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
app.js
var app = angular.module('plunker', [])
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*//www.youtube.com/embed/**'
]);
});
http://plnkr.co/edit/L2kvZW8Uh45HeiGeaFtl?p=preview but am not sure what Im doing wrong as have used resourceUrlWhitelist.
I managed to solve it http://plnkr.co/edit/L2kvZW8Uh45HeiGeaFtl
by adding
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $sce) {
$http.get("http://angular.webiflex.co.uk/connect.php")
.then(function (response) {$scope.names = response.data.records;});
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
};
});
and then
ng-src="{{trustSrc('//www.youtube.com/embed/' + x.URL)}}"
Related
I'm working on the project at school. They asked me to use $http.post to enter 2 value Day and Customer and show the json data in table. Could you help me with this, I've researched on how to use $http.post and fix the code but it won't work. Please show me what am I misunderstand or there is any way else to complete this. Thank you very much.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> $http.post </title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f5f5f5;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="postapp" ng-controller="postservice">
<div>
Day : <input ng-model="day"><br /><br />
Customer : <input ng-model="customer"><br /><br />
<input type="button" value="Send" ng-click="postdata(day, customer)">
<br /><br />
</div>
<table>
<tr>
<th>ID</th>
<th>Status</th>
<th>Environment</th>
<th>Host</th>
<th>IP</th>
<th>Description</th>
<th>Time</th>
</tr>
<tr ng-repeat="x in names">
<td>{{ x.ID}}</td>
<td>{{ x.Status}}</td>
<td>{{ x.Environment}}</td>
<td>{{ x.Host}}</td>
<td>{{ x.IP}}</td>
<td>{{ x.Description}}</td>
<td>{{ x.Time}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('postapp', []);
app.controller('postservice', function postservice($scope, $http) {
$scope.day = null;
$scope.customer = null;
$scope.postdata = function(day, customer) {
var data = {
day: day,
customer: customer
};
$http.post("https://b0gtju7vp5.execute-api.us-east-
1.amazonaws.com/staging", JSON.stringify(data))
.success(function(response) {
$scope.names = response;
});
};
});
</script>
</body>
Here is view what I have to do, hope this will make it more clearly.View pic
Jazzed it up a bit and added a loading spinner for you.
Also with the request being cross origin i.e making a request to a different url than the site it runs on you will need to run Chrome with CORS disabled. Chrome blocks these requests by default and you have to switch it of for development.
In the run box in windows paste in the following:
chrome.exe --user-data-dir="C://Chrome-dev-session" --disable-web-security
If you have a mac google 'How to run Chrome with CORS disabled'.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> $http.post </title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f5f5f5;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="postapp" ng-controller="postservice">
<!-- Loading spinner that will be shown when requst is in progres -->
<div ng-if="isLoading">
loading data...
</div>
<!-- Hide the page content when loading data -->
<div ng-if="!isLoading">
<div>
Day :
<input ng-model="day">
<br />
<br /> Customer :
<input ng-model="customer">
<br />
<br />
<input type="button" value="Send" ng-click="getNames(day, customer)">
<br />
<br />
</div>
<table>
<tr>
<th>ID</th>
<th>Status</th>
<th>Environment</th>
<th>Host</th>
<th>IP</th>
<th>Description</th>
<th>Time</th>
</tr>
<tr ng-repeat="name in names">
<td>{{ name.ID}}</td>
<td>{{ name.Status}}</td>
<td>{{ name.Environment}}</td>
<td>{{ name.Host}}</td>
<td>{{ name.IP}}</td>
<td>{{ name.Description}}</td>
<td>{{ name.Time}}</td>
</tr>
</table>
</div>
<pre>{{names | json}}</pre>
</div>
<script>
var app = angular.module('postapp', []);
app.controller('postservice', function postservice($scope, $http) {
$scope.day = null;
$scope.customer = null;
$scope.names = [];
$scope.isLoading = false;
$scope.getNames = function (day, customer) {
$scope.isLoading = true;
var data = {
day: day,
customer: customer
};
var url = "https://b0gtju7vp5.execute-api.us-east-1.amazonaws.com/staging";
$http.post(url, data)
.then(
function (response) {
$scope.names = response;
$scope.isLoading = false;
},
function (error) {
alert('Failed to post data');
$scope.isLoading = false;
});
};
});
</script>
</body>
</html>
I have a table of users. When I click on a user name , it has to display a bootstrap modal . But once i close the modal , the table page is locked and I'm not able to click on any other user's name . The page is locked .
The code be like ,
<!DOCTYPE html>
<html>
<head>
<title>TAble</title>
<style>
table, th{
border: 1px solid Green;border-collapse : collapse;
margin:25px;
text-align:center;
}
td {
border: 1px solid Green;
}
th{
padding: 5px;
Font-size:110%;
}
</style>
</head>
<body ng-app="myApp">
<script src="1.4.8/angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="angular-animate.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.js"></script>
<script src="ng-table.js"></script>
<link rel="stylesheet" href="ng-table.min.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<body ng-app="myApp">
<div ng-controller="tableController">
{{test}}
<table ng-table="usersTable" style="width:85%" class="table table-striped">
<tr ng-repeat="x in data" >
<td data-title="'Id'" filter="{ Id: 'number'}">
<a ng-click='open(x)'>{{x.id}}</a>
</td>
<td data-title="'First Name'">
{{x.first_name}}
</td>
<td data-title="'Last Name'">
{{x.last_name}}
</td>
<td data-title="'e-mail'" >
{{x.email}}
</td>
<td data-title="'Country'">
{{x.country}}
</td>
<td data-title="'IP'" >
{{x.ip_address}}
</td>
</tr>
</table>
</div>
</body>
<script>
var app = angular.module('myApp',['ngTable','ui.router','ngAnimate', 'ui.bootstrap']);
app.controller('tableController',function($scope,$uibModal,$filter,ngTableParams)
{
$scope.customers = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0#mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
{"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1#mapquest.com","country":"China","ip_address":"173.65.94.30"},
{"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2#illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
{"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3#blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},
{"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4#fda.gov","country":"Russia","ip_address":"128.72.13.52"}];
$scope.usersTable = new ngTableParams({ },
{
getData: function ($defer, params) {
count:[],
$scope.data = params.filter() ? $filter('filter')($scope.customers, params.filter()) : $scope.data;
$defer.resolve($scope.data);
}
});
$scope.localID=0;
$scope.count=2;
$scope.open = function(w) {
var modalInstance = $uibModal.open({
animation: true,
template: '<h1>Hello</h1>',
controller: 'ModalInstanceCtrl',
backdrop:false,
keyboard:true,
size:'Lg',
resolve: {
customers: function () {
return w;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance,customers) {
$scope.data = customers;
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
</script>
</html>
Found the Solution . I was using angularjs1.4.8 so this problem occured ! I tried using AngularJS 1.5.3 and it worked properly !
I am currently working on developing a grid component using HTML / AngularJS. The column data are rendered dynamically.
I am trying to format the data displayed based on the dataType. The data types could be like currency / date / number format. Conceptually, I am trying to achieve like the below one.
Is it possible?
<td ng-repeat="row in rows" title="{{row.toolTip}}">
{{row.displayData | row.dataType: row.format}}
</td>
Format your data with AngularJS filters
AngularJS provides some filters: currency, lowercase, uppercase (http://www.w3schools.com/angular/angular_filters.asp) or you can define your own filter
Example:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
name: "Item1",
price: 50.3
}, {
name: "Item2",
price: 15.55
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in data">
<td>{{ x.name }}</td>
<td>{{ x.price | currency }}</td>
</tr>
</table>
</div>
Here I modified the W3schools example using a conditional in the ng-style definition to change the CSS style
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names" ng-style="{'background-color':(x.Country == 'UK')?'blue':'gray'}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {
$scope.names = response.records;
});
});
</script>
I'm new to angularjs, whenever i request get data from server i will get error status 0. Can someone point out, what wrong with my code.
HTTPGET
Huge Data in terms of 1000+ entries
WCF RESTFull Services
index.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="client in Clients">
<td>{{ client.id}}</td>
<td>{{ client.name }}</td>
</tr>
</table>
</div>
</body>
</html>
script
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("http://localhost:8080/Clients.svc/getclients&clinetid=?")
.success(function (data, status, headers, config) {
$scope.Clients = data.clients;
})
.error(function (data, status, headers, config) {
alert(status);
});
});
</script>
I have written a simple code which gets a list items from a php file using the get method. They are displayed successfully, but however, when injecting the ngAnimate module it seems that its not working properly:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<style type="text/css">
.slide.ng-enter.ng-enter-active,
.slide.ng-leave {
opacity: 1;
height: 80px;
overflow: hidden;
}
.slide.ng-leave.ng-leave-active,
.slide.ng-leave {
opacity: 0;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type='text' ng-model='search' placeholder="Search Here">
<ul>
<li ng-animate="animate" class="slide" ng-repeat="x in names | filter: search">
{{ (x.Name | uppercase) + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
</body>
</html>
I was able to solve the issue;
it was a CSS typo error which I was able to debug:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-animate.js"></script>
<style type="text/css">
.ng-enter {
transition:0.75s;
opacity:0;
}
.ng-enter-stagger{
transition-delay:0.3s;
}
.ng-enter-active {
opacity:1;
}
.ng-leave-stagger{
transition-delay:0.3s;
}
.ng-leave {
transition:0.75s;
opacity:1;
}
.ng-leave-active {
opacity:0;
}
</style>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type='text' ng-model='search' placeholder="Search Here">
<ul>
<li ng-animate="'animate'" class="slide" ng-repeat="x in names | filter: search">
{{ (x.Name | uppercase) + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {
$scope.names = response.records;
});
});
</script>
</body>
</html>