AngularJS V1.6.4
$scope.aCourse["name"] is logged to console correctly, but in the HTML code nothing is populated into the screen.
$scope.getCourse = function(idd){
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password') );
$http({
method: 'GET',
url: 'http://localhost:8080/course/'+idd,
}).then(function successCallback(response) {
$scope.aCourse = response.data;
console.log($scope.aCourse["name"]);
window.location = "/website-take-course.html";
}, function errorCallback(response) {
alert("Course data in fetching failed");
});
}
HTML Code:
<div class="page-section padding-top-none" ng-repeat="c in aCourse" >
<div class="media media-grid v-middle">
<div class="media-left">
<span class="icon-block half bg-blue-300 text-white">1</span>
</div>
<div class="media-body" >
<h1 class="text-display-1 margin-none" >{{c.name}}</h1>
</div>
</div>
<br/>
<p class="text-body-2">{{c.description}}</p>
</div>
Based on your post, it lookes like $scope.aCourse is a object, not an array.
change it as follows,
<div class="page-section padding-top-none" ">
<div class="media media-grid v-middle">
<div class="media-left">
<span class="icon-block half bg-blue-300 text-white">1</span>
</div>
<div class="media-body">
<h1 class="text-display-1 margin-none">{ aCourse.name }}</h1>
</div>
</div>
<br/>
<p class="text-body-2">{{aCourse.description}}</p>
</div>
or use something like this to iterate over object,
<div ng-repeat="(key,value) in aCourse">
{{key}} : {{value}}
</div>
DEMO
var app = angular.module('filterApp', []);
app.controller('myCtrl', function($scope) {
$scope.aCourse = {
"content": "SO",
"description": "Programmers"
};
});
<!DOCTYPE html>
<html >
<head>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="filterApp" ng-controller="myCtrl">
<div ng-repeat="(key,value) in aCourse">
{{key}} : {{value}}
</div>
</body>
</html>
There could be a two situations :
1. $scope.aCourse is an array of objects [{},{},{}].
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.aCourse = [
{
"name": "alpha",
"description" : "description1"
},
{
"name": "beta",
"description" : "description2"
},
{
"name": "gamma",
"description" : "description3"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="page-section padding-top-none" ng-repeat="c in aCourse" >
<div class="media-body" >
<h1 class="text-display-1 margin-none" >{{c.name}}</h1>
</div>
<p class="text-body-2">{{c.description}}</p>
</div>
</div>
2. $scope.aCourse is an Object {......}.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.aCourse = {
"name": "alpha",
"description" : "description1"
};
console.log($scope.aCourse["name"]);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="page-section padding-top-none" ng-repeat="(key, value) in aCourse" >
<div class="media-body" >
<h1 class="text-display-1 margin-none" >{{value}}</h1>
</div>
</div>
</div>
In your angular code you are setting aCourse to the response data. You then access the data as an object with:
$scope.aCourse["name"]
Then in your html you are running an ng-repeat on $scope.aCourse as if it were an array of objects:
<div class="page-section padding-top-none" ng-repeat="c in aCourse" >
You would either need to make aCourse an array of objects to use your current html, or update your html and access the object in aCourse with aCourse.name and aCourse.description.
Related
i am making a http.get that is giving me this answer below, that i am getting from a localhost json:
[
{
"_id": 52562,
"title": "Event name",
"startDate":"20-03-20",
"endDate": "20-03-20",
"description": "Lorem ipsun doloren he jlhdkh skjrlkuslinf sidhkjh this is a test",
"imageUrl": [
"https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg",
],
"donateTypes": [{
"_id": 1,
"name": "Fraldas",
"min": 2,
"total": 12
}, {
"_id": 1,
"name": "Fraldas",
"min": 2,
"total": 12
}, {
"_id": 1,
"name": "Fraldas",
"min": 2,
"total": 12
}]
}
];
The thing is, in my html the scope is not rendering, i really don't know why and i have already tried everything! i dont know what to do! anybody can help?
index.html:
<!DOCTYPE html>
<html ng-app="saoVicentinoApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular-route.js"></script>
<script src="app.js"></script>
<script src="EventController.js"></script>
<script src="github.js"></script>
</head>
<body>
<h1>Sao Vicente</h1>
<div ng-view></div>
</body>
</html>
github.js
(function(){
var github = function($http){
var getUser = function(){
return $http.get("http://localhost/course1/finalAndCorrect/json")
.then(function(response){
return response.data;
});
};
return{ //what i return will represent the public api
getUser: getUser
};
};
var module = angular.module("saoVicentinoApp");
module.factory("github", github);
}());
app.js:
(function(){
var app = angular.module("saoVicentinoApp", ["ngRoute"]);
app.config(function($routeProvider){ //do this configuration when bringing this module to life
$routeProvider
.when("/", {
templateUrl:"user.html",
controller:"EventController"
})
.otherwise({redirectTo:"/"});
});
}());
EventController.js:
(function(){
angular.module('saoVicentinoApp')
.controller('EventController', ['$scope', 'github', function($scope, github){
$scope.test = 4;
var onUserComplete = function(data){
$scope.event = data;
console.log($scope.event);
};
var onError = function(reason){
$scope.error = "Could not fetch the data.";
};
github.getUser()
.then(onUserComplete, onError);
}]);
}());
user.html
<!-- event Container -->
<div class="list-group">
<!-- event Container -->
<div class="list-group-item">
<h3>{{event.title}}
<em class="pull-right">{{event.startDate}} - {{event.endDate}}</em>
</h3>
<!-- Image Gallery -->
<div ng-show="event.imageUrl.length">
<!-- Fail 1 Message -->
<div ng-show="event.imageUrl">
<img class="img img-circle img-thumbnail center-block" ng-src="{{event.imageUrl[0]}}" />
<!-- <ul class="clearfix">
<li class="small-image pull-left thumbnail" ng-repeat="image in event.imageUrl"> <img ng-src="{{image}}" /> </li>
</ul>-->
</div>
</div>
<section>
<ul class="nav nav-pills">
<li><a href ng-click="tab = 1">Description</a></li>
<li><a href ng-click="tab = 2">Como posso contribuir?</a></li>
<li><a href ng-click="tab = 3">Calendario</a></li>
</ul>
<div class="panel" ng-show="tab === 1">
<h4>Description</h4>
<blockquote>{{event.description}}</blockquote>
</div>
<div class="panel" ng-show="tab === 2">
<h4>Como posso contribuir?</h4>
<div ng-repeat="donations in event.donateTypes">
<div>{{donations.name}}</div>
<div>{{donations.min}}</div>
<div>{{donations.total}}</div>
</div>
</div>
<div class="panel" ng-show="tab === 3">
<h4>Calendario</h4>
<blockquote>None yet</blockquote>
</div>
</section>
</div>
</div>
remove the promise from the factory. Since you are using promise(.then) from then controller no need to use it from the factory. Just return the http request
github.js
(function(){
var github = function($http){
var getUser = function(){
return $http.get("http://localhost/course1/finalAndCorrect/json")
};
return{ //what i return will represent the public api
getUser: getUser
};
};
var module = angular.module("saoVicentinoApp");
module.factory("github", github);
}());
You json is also invalid
[
{
"_id":52562,
"title":"Event name",
"startDate":"20-03-20",
"endDate":"20-03-20",
"description":"Lorem ipsun doloren he jlhdkh skjrlkuslinf sidhkjh this is a test",
"imageUrl":[
"https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"
],
"donateTypes":[
{
"_id":1,
"name":"Fraldas",
"min":2,
"total":12
},
{
"_id":1,
"name":"Fraldas",
"min":2,
"total":12
},
{
"_id":1,
"name":"Fraldas",
"min":2,
"total":12
}
]
}
]
And data in http response comes under data property. So change this
var onUserComplete = function(data){
$scope.event = data.data[0];
console.log($scope.event);
};
I want to format output of a json file, that I read in Angular. I want to use a bootstrap grid, but I tried and I had no success.The files are:
test.html
<html>
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-app="MyApp" ng-controller="TestCtrl">
<ul>
<div class="row">
<div class="col-md-2">
<li ng-repeat-start="pat in patients">
<strong> {{pat.name}}</strong>
</li>
</div>
<div class="col-md-2">
<li ng-repeat-end ng-repeat="diag in pat.diagnose">
{{diag.disease}}
</li>
</div>
</div>
</ul>
</body>
test.js
var App = angular.module('MyApp', []);
App.controller('TestCtrl', function($scope, $http) {
$http.get('test.json').success(function(data){
$scope.patients = [];
angular.forEach(data.patients, function(value, key){
$scope.patients.push(value);
});
});
});
test.json
{
"patients": [
{
"name": "Abcd",
"diagnose":[
{"disease":"Ddd"},
{"disease":"Rrrr"},
{"disease":"Aaaaa"}
]
},
{
"name": "Efghij",
"diagnose":[
{"disease":"Hhhhh"}
]
},
{
"name": "Klmnop",
"diagnose":[
{"disease":"Gggggg"}
]
},
{
"name": "Qrst",
"diagnose":[
{"disease":"Oooooo"},
{"disease":"Xxxxxx"}
]
}
]
}
I want to have on each row: Name (col 1), Disease (col2). (diseases listed vertically). Coul you help me plese
You can try this,
var App = angular.module('MyApp', []);
App.controller('TestCtrl', function($scope) {
$scope.patients = [
{
"name": "Abcd",
"diagnose":[
{"disease":"Ddd"},
{"disease":"Rrrr"},
{"disease":"Aaaaa"}
]
},
{
"name": "Efghij",
"diagnose":[
{"disease":"Hhhhh"}
]
},
{
"name": "Klmnop",
"diagnose":[
{"disease":"Gggggg"}
]
},
{
"name": "Qrst",
"diagnose":[
{"disease":"Oooooo"},
{"disease":"Xxxxxx"}
]
}
];
});
angular.bootstrap(document, ['MyApp']);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="TestCtrl" class="container">
<div class="row" ng-repeat="pat in patients">
<div class="col-md-2">
<strong> {{pat.name}}</strong>
</div>
<div class="col-md-2">
<ul>
<li ng-repeat="diag in pat.diagnose">
{{diag.disease}}
</li>
</ul>
</div>
</div>
</body>
Try this:
https://jsfiddle.net/RLQhh/6393/
<ul ng-repeat="pat in patientsList.patients">
<div class="row">
<div class="col-md-6">
<li>
<strong> {{pat.name}}</strong>
</li>
</div>
<div class="col-md-6">
<li ng-repeat="diag in pat.diagnose">
{{diag.disease}}
</li>
</div>
</div>
</ul>
I was very unclear. The grid structure I want to create the grid is :
Patient_1 Disease_1_Patient_1
Disease_1_Patient_1
Disease_2_Patient_1
------------------------------------------------
Patient_2 Disease_1_Patient_2
Disease_2_Patient_2
------------------------------------------------
and so on.
I hope it will be useful for someone else. Finaly, I got the result I wanted.I changed the HTML file as follows (I'll show only the body section):
<body ng-app="MyApp" ng-controller="TestCtrl">
<div class="container" ng-repeat="pat in patients">
<div class="row">
<div class="col-md-2">{{pat.name}}</div>
<div class="col-md-2"><ul><li ng-repeat="diag in pat.diagnose">{{diag.disease}}</li></ul></div>
</div>
</div>
</body>
I reach this result, by creating first a HTML table like this:
<table ng-repeat="artist in artists">
<tr>
<td>{{artist.name}}</td>
<td ><ul><li ng-repeat="album in artist.albums">{{album.title}}</li></ul></td>
</tr>
</table>
Then I replaced:
<table>
with
<div class="container">,
<tr>
with
<div class="row">
and
<td>
with
<div class="col-xx-xx">
How to list items in AngularJS and separate them by category, something like this:
<h3>Products</h3>
<div ng-repeat="item in products">
<div>
{{item.category}}
</div>
<p>
{{item.name}}
</p>
<p>
{{item.price}}
</p>
</div>
$scope:
$scope.products = [
{
name:"product1",
price:"450",
category:"cat1"
},
{
name:"product2",
price:"450",
category:"cat2"
},
{
name:"product3",
price:"450",
category:"cat1"
}
];
I want it to look something like this:
cat1
--->product1
--->product3
cat2
--->product2
...
Please help!
See [fiddle])(http://jsfiddle.net/Lvc0u55v/2846/)
I did some formatting to message the data in desired format.
$scope.productCategories = {};
for (var i = 0; i < products.length; i++) {
if ($scope.productCategories[products[i].category] == undefined)
$scope.productCategories[products[i].category] = [];
$scope.productCategories[products[i].category].push({
name: products[i].name,
price: products[i].price
});
}
Html Formatting is off, but I hope this gives you an idea
you can use groupBy filter in ng-repeat. you should add groupBy filter dependency in your app.
var app = angular.module("app",['angular.filter']);
app.controller("ctrl" , function($scope){
$scope.products = [ { name:"product1", price:"450", category:"cat1" }, { name:"product2", price:"450", category:"cat2" }, { name:"product3", price:"450", category:"cat1" } ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<h3>Products</h3>
<div ng-repeat="(key,value) in products | groupBy: 'category'">
<div>
{{key}}
</div>
<div ng-repeat="item in value">
<p>
{{item.name}}
</p>
<p>
{{item.price}}
</p>
</div>
</div>
</div>
I have a problem. I need to know how to get grandparent's ID in AngularJS.
I need "{{parent}}" to become "grand-parent".
(it should be <div id="me-and-my-grand-parent">)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var pid = document.getElementsByClassName("i-am-a-child");
var pid = this.parentNode.id;
if (this.parentNode&&this.parentNode.id)
var pid=this.parentNode.id;
$scope.parent = var pid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="grand-parent{{$index}}" ng-repeat="item in items">
<div>
<div>
<div id="me-and-my-{{parent}}" class="i-am-a-child">
</div>
</div>
</div>
</div>
</div>
My actual code
<li ng-repeat="project in projects" ng-class="{active: project.childToggle, '': !project.childToggle,hasChild: project.children.length > 0 }" ng-dblclick="childToggleCt(project)" id="project-{{$index}}">
<div class="project-overview">
<header class="clearfix flip-area">
<span ng-if="!project.inCart" class="status dropdown-button warning pull-left" id="id-{{ParentIdShow}}" data-intro="Status bar" data-position="right">Pending</span>
And for now JS was like tis :
$scope.ParentIdShow = function(obj)
{
alert(obj.target.parentNode.parentNode.parentNode.id);
}
The answer to these types of "parent of my parent of my parent of my..." is to use the controller as syntax. Read more about it here. In short, it lets you do stuff like
<div ng-controller="ctrl1 as first">
<div ng-controller="ctrl2 as second">
...
<div ng-controller="ctrlN as Nth">
<div ng-repeat="i in arr">
{{first.property}}
{{second.otherProperty}}
{{Nth.nProperty}}
Note how you dont need any parent calls.
I have set up a fiddle to explain my question well. I would like to display the names from the $scope.gem inside ng-repeat [only one name for each ng-repeat and don't loop all] of $scope.knobItems without extending the knobItems scope. I want this to be made possible by maintaining the exact structure of controller as it is now. I am new to angular. I just wanna know if this is possible in angular and if is a good practice.
view
<div ng-app="myapp">
<div ng-controller="Mycont">
<div ng-repeat="knobs in knobItems">
<div ng-repeat="(key, value) in knobItems.nums">{{value.knobTitle}} : {{value.knobColor}}
<div ng-bind="gem[0].name"></div>
</div>
</div>
</div>
</div>
controller
var ngMod = angular.module("myapp", []);
ngMod.controller("Mycont", function ($scope) {
$scope.knobItems = {};
$scope.knobItems.nums = [{
knobTitle: "Company Profile",
knobColor: "#f46607"
}, {
knobTitle: "Deals left This Month",
knobColor: "#ffcc00"
}, {
knobTitle: "Pricelist",
knobColor: "#f40787"
}, {
knobTitle: "Pictures",
knobColor: "#a1b80a"
}, {
knobTitle: "Videos",
knobColor: "#14b9d6"
}];
$scope.gem = [{
name: "Thomas"
}, {
name: "Sebastian"
}, {
name: "June"
}, {
name: "Yuvan"
}];
});
intended output
Easy fix: fiddle
<div ng-app="myapp">
<div ng-controller="Mycont">
<div ng-repeat="knobs in knobItems">
<div ng-repeat="(key, value) in knobItems.nums">{{value.knobTitle}} : {{value.knobColor}}
<div ng-bind="gem[$index].name"></div>
</div>
</div>
</div>
</div>
The output in you fiddle is exactly the same without the first ng-repeat: http://jsfiddle.net/2nrbrfxL/
Going by you description rather than you code:
<div ng-app="myapp">
<div ng-controller="Mycont">
<div ng-repeat="knobs in knobItems">
<div ng-repeat="(key, value) in knobs">{{value.knobTitle}} : {{value.knobColor}}
<div ng-repeat="gemItem in gem">{{gemItem.name}}</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/p2fuq2du/
<div ng-app="myapp">
<div ng-controller="Mycont">
<div ng-repeat="(key, value) in knobItems.nums">{{value.knobTitle}} : {{value.knobColor}}
<div ng-bind="gem[key].name"></div>
</div>
</div>
</div>