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>
Related
I have an angularjs accordion whose data is coming from json,but here its working fine but in my project accordion is not working.Is there any other way to do it.Below is my code.I am new to angularjs.Thanks in advance.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="app.js"></script>
<style>
.test1{
background: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<div>
<div ng-repeat="test in items">
<div class="test1" ng-click="handleClick(test)">
{{test.title}}
</div><br>
<div class="test2" ng-show="selectedItem==test"> {{test.location}}</div><br>
</div>
</div>
</div>
</div>
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"title": "firstitem",
"location": "location1"
},
{
"title": "seconditem",
"location": "location2"
},
{
"title": "thirditem",
"location": "location3"
}
];
$scope.handleClick = function (test) {
$scope.selectedItem = test;
}
});
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
You can create Angularjs accordion using the following way easily.
HTML
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
Check my JSFiddle for more clarification.
Good Luck!
My browser only renders : "{{ cust.name + ',' + cust.city }}"
index.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1em;
}
</style>
</head>
<body>
<div data-ng-controller="SimpleController">
Name :
<br>
<input type="text" data-ng-model="name">
<br>
<ul>
<li data-ng-repeat="cust in customers">{{ cust.name + ',' + cust.city }}</li>
</ul>
</div>
<script>
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{name:'John', city:'Paris'},
{name:'Andy La', city:'Londra'},
{name:'George', city:'Berlin'}
];
});
demoApp.controller(controllers);
</script>
</body>
<script src="Scripts/angular.min.js"></script>
</html>
Its something wrong with my code??? Any ideea what can i do?
I have tryed some other ideeas from other sites and other people but it doesn't work. I dont know what do do anymore.
I am quite new with angularJS!
Thanks!
You need to refer the angular.js script inside the body tag
Also you have extra paranthesis at the end, remove it.
DEMO
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{name:'John', city:'Paris'},
{name:'Andy La', city:'Londra'},
{name:'George', city:'Berlin'}
];
};
demoApp.controller(controllers);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="SimpleController">
Name :
<br>
<input type="text" data-ng-model="name">
<br>
<ul>
<li data-ng-repeat="cust in customers">{{ cust.name + ',' + cust.city }}</li>
</ul>
</div>
I have implemented a pagination and a filter based on a criteria function: JSBin:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div style="float: right; margin-right: 200px">
has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="null" /><br>
</div>
<h3>Existing friends</h3>
<div ng-repeat="friend in filteredFriends | filter: criteriaMatch(criteria)">
{{friend.name}}
</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
</section>
</body>
</html>
JavaScript:
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('friendsFactory', function() {
var o = {
friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"},
{"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"},
{"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
{"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
{"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
};
return o;
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.friends;
$scope.totalItems = $scope.friends.length;
$scope.itemsPerPage = 5
$scope.currentPage = 1;
function refresh() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.filteredFriends = friendsFactory.friends.slice(begin, end);
$scope.totalItems = $scope.friends.length;
}
$scope.criteria = { number: "null" };
$scope.criteriaMatch = function (cri) {
return function (friend) {
return ((cri.number === "null") || (friend.name.length > cri.number));
};
};
$scope.$watch('currentPage', refresh);
});
The problem is that, after selecting the filter, it shows the names whose length is greater than 3 page by page. What I want is that, it should recalculate the number of pages, and keep showing 5 good names per page.
Does anyone know how to modify the program to realise this?
Additionally, if I replace "null" by null, it will not work after selecting and deselecting the filter. Does anyone know why?
PS: it is very different from this thread; not a duplication...
Here is a solution: JSBin:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="description" content="filter and pagination 1">
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div style="float: right; margin-right: 200px">
has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="0" /><br>
</div>
<h3>Existing friends</h3>
<div ng-repeat="friend in filteredFriends | start: (currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
{{friend.name}}
</div>
<pagination total-items="filteredFriends.length" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
</section>
</body>
</html>
JavaScript:
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('friendsFactory', function() {
var o = {
friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"},
{"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"},
{"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
{"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
{"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
};
return o;
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.friends;
$scope.criteria = { number: 0 }
$scope.filteredFriends = $scope.friends;
$scope.itemsPerPage = 5
$scope.currentPage = 1;
function refresh() {
$scope.filteredFriends = $scope.friends.filter(function(item){
return item.name.length > $scope.criteria.number;
})
};
$scope.$watch('currentPage', refresh);
$scope.$watch('criteria.number', refresh);
});
app.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
return input.slice(start);
};
});
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)}}"
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)