Just started with Angular and trying to bind images.
This error shows up after page load in chrome.
'Uncaught Object - MINNER ASSET: 22
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
}
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img src="{{image.src}}" />
</li>
</ul>
</div>
</body>
Hi you miss var app = angular.module("DemoApp",[]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("DemoApp",[]);
app.controller("DemoController",
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
});
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" />
</li>
</ul>
</div>
</body>
</html>
You haven't defined DemoApp, you can skip the app name.
<div ng-app ng-controller="DemoController">
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!
I wants to catch parent name and id on child selection.
Output should be:
$scope.selected = [{"name": "Request1", "id":1,
"status":[{"name":"status1","isSelected":true},
{"name":"status2","isSelected":false}]
}]
Able to get selected child but respective parent not getting.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
]
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
You can utilize the $index for getting the parent name and id.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
var result = [];
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
];
$scope.getParent = function(index, selectedState){
result = [];
var req = {
"name": $scope.requests[index].name,
"id": $scope.requests[index].id,
"status": selectedState
}
result.push(req);
console.log("result",result);
return angular.toJson(result);
};
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-click="getParent($index, request.selectedStatus)" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
I am working on the tutorial to build an AngularJs app where I am fetching information of users. When I am running the app and the output doesn't display.
My index.html
<!DOCTYPE html>
<html data-ng-app="myContactApp" >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<script src="appConfig.service.js"></script>
<script src="appname.service.js"></script>
<script src="contact.controller.js"></script>
<script src="contactdata.service.js"></script>
<title>My Contact Application</title>
</head>
<body>
<main>
<div class='container' ng-controller="contactController as ctrl">
<div class='row'>
<ul class="list-group">
<li class="list-group-item" ng-repeat="con in ctrl.contactArr" data-ng-click="ctrl.selectUser($index)">
<span>{{con.name.first+ " "+con.name.last}}</span>
</li>
</ul>
</div>
<div class='row'>
<div class="media">
<div class="media-left">
<a href="#">
<img data-ng-src="{{ctrl.selectedUser.picture.medium}}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ctrl.selectedUser.name.first+ " "+ctrl.selectedUser.name.last}}</h4>
<div>
<p>
<h6>Location</h6>
</p>
<p>
{{ctrl.selectedUser.location.street+" "+ctrl.selectedUser.location.city+" "+ctrl.selectedUser.location.state+" "+ctrl.selectedUser.location.postcode}}
</div>
<div>
<p>
<h6>Phone</h6>
</p>
<p>{{ctrl.selectedUser.phone}}</p>
</div>
<div>
<p>
<h6>email</h6>
</p>
<p>
{{ctrl.selectedUser.email}}</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
My app.js
var app=angular.module("myContactApp",[]);
My appconfig.service.js
(function(){
var app=angular.module("myContactApp");
app.service("AppDataServiceSVC",function(appNameSVC){
this.Name=appNameSVC;
this.author='Bhaskar';
this.buildDate=new Date().toDateString();
});
})();
My appname.service.js file :-
(function (){
var app=angular.module("myContactApp");
app.value("AppNameSVC","My New Contact List");
})();
My contact.controller.js file
(function(){
var app=angular.module("myContactApp");
app.controller("contactController",contactCtrl);
function contactCtrl(ContactDataSVC){
var self=this;
ContactDataSVC.getContacts().then(function(data){
self.contacts=data;
})
this.selectUser=function(index){
this.selectedUser = this.contactArr[index];
}
}
})();
My contactdata.service.js
(function(){
var app=angular.module("myContactApp");
app.service("ContactDataSVC",function($http){
var self=this;
self.getContacts=function(){
var response1=$http.get('http://localhost:3000/contacts');
var response2=response1.then(function(response){
return response.data;
});
return response2;
}
});
})();
I have created db.json which I am running on json-server and using it as REST API. It should display contact details but it doesn't display anything on the browser. I am unable to figure out where I have made the mistake.
In controller you use: self.contacts=data;
Change ng-repeat="con in ctrl.contactArr" to:
ng-repeat="con in ctrl.contacts"
also pass con to selectUser : data-ng-click="ctrl.selectUser(con)"
Demo plunker
I'm trying to make this plunker Ui-grid cell template working on most browsers, but it fails in IE 11.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap#0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Data.json
[
{
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
},
{
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
}
]
statusTemplate.html
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:{{ (row.entity.priced/row.entity.loaded)*100|number:2}}% ;">
{{ (row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}% ;">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" style="width:{{ (row.entity.error/row.entity.loaded) *100|number:2}}% ;">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
app.js
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'jobId' },
{ name: 'status', cellTemplate: 'statusTemplate.html' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
;
Any explanation is very appreciated
Update
This works on Firefox, Safari and Chrome
One of the problems that you may be getting is the Access denied. That happens when a script tried to access data from a source other than the host of the current page. Check this link: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Check this link on how to disable Disable same origin policy Internet Explorer.
Also, you should use ng-style instead of style only.
Here's a plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview
<div class="progress">
<div class="progress-bar progress-bar-success" ng-style="{'width': (row.entity.priced/row.entity.loaded)*100 + '%' }">
{{(row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="{'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' }">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" ng-style="{'width': ((row.entity.error/row.entity.loaded)*100) + '%' }">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
I have created here a working demoapp in which I have used the restangular
It is working perfectly fine but when I tired to implement the demoapp with the factory the data doesnt seem to come and I cant check out the possible bug in this
/* the file containing my json object*/
[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
},
{"id":4,
"subject":"#harish"
}
]
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.harish"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("\js");
app.controller('IndexCtrl', function( testFactory) {
var self=this;
testFactory.getFriendList.then(function (homeFriends) {
self.people=homeFriends;
console.log(self.people);
});
});
app.factory('testFactory', ['Restangular', function (Restangular) {
return {
getFriendList: Restangular.all('emp.json').getList()
}
}]);
</script>
</body>
</html>
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.harish"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("\js");
});
app.controller('IndexCtrl', function( Restangular, testFactory) {
var self=this;
Restangular.all('evm.json').getList().then(function(result) {
self.people = result;
});
testFactory.getFriendList.then(function (homeFriends) {
console.log(self.people);
self.people=homeFriends;
});
});
app.factory('testFactory', ['Restangular', function (Restangular) {
return {
getFriendList: Restangular.all('emp.json').getList()
}
}]);
</script>
Their is some syntax issue and I have corrected and now your App will run