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">
Related
i should get output like that in second div i should get inplace of headers i should get income which is mentioned in the controller object data
I just need different content in two div when I changed the data in controller object it should be reflected in div.
here is my html code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
***emphasized text***
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="angular-gridster.min.css"></link>
<link rel="stylesheet" href="wid.css"></link>
</head>
<body ng-controller="myController" >
<div gridster ng-controller="myCtrl" >
<ul>
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget ></div>
</li>
</ul>
</div>
</body>
</html>
my script goes here which contains the controller as well as directive.
var app=angular.module('myApp',['gridster'])
app.controller('myController',function($scope){
$scope.Items = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0, },
{ sizeX: 2, sizeY: 1, row: 0, col: 0, }
]
});
app.controller('myCtrl',function($scope){
$scope.content=[{
data:54565463,
right:67566,
title:'headers'},
{ data:65476756,
right:123,
title:"Income",
}]
});
app.directive('myWidget',function(){
return{
restrict:"EA",
scope:{
title:'#',
data:'=',
},
templateUrl:'spare.html',
}
});
and my spare html is below -
<span ng-controller="myCtrl">
<div class="panel-body " ng-style = "myStyle">
<h1 class="title" >{{content.title}}</h1>
<i class="fa fa-dollar" ></i>{{content.data}}</div>
<p id="rightcorner" ><i class="fa fa-level-up"></i>{{content.right}}
</p>
</span>
what i need is in 2 div's i should get separate data which is giveenter code heren in controller object
Your directive is using an isolated scope (scope:{ title:'#', data:'='}). That's why it doesn't have access to the content array of the parent scope (which is a good thing in general).
What you wanna do is to pass an item of $scope.content to the my-widget directive.
You could use the $index variable of the ngRepeat scope.
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget data="content[$index]"></div>
</li>
As the my-widget directive has its own scope, you have to change the binding expressions (there is no thing called content in the directive scope).
<div class="panel-body">
<h1 class="title" >{{title}}</h1>
<i class="fa fa-dollar" ></i>{{data.data}}
</div>
<p id="rightcorner"><i class="fa fa-level-up"></i>{{data.right}}
</p>
By the way, title is a bad name for an attribute, as it's an html attribute.
EDIT: Added example code for a solution with a single controller, as asked in comments.
angular.module('app', [])
.controller('myController', myController)
.directive('myWidget', myWidget);
function myController() {
var vm = this;
vm.items = [
{
title: "1",
obj: { data: 123 }
},
{
title: "2",
obj: { data: 234 }
}];
}
function myWidget() {
return {
scope: {
data: '<'
},
template: '<div>Widget: {{data.data}}</div>'
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="myController as $ctrl" >
<div>
<ul>
<li ng-repeat="item in $ctrl.items">
<div ng-bind="item.title"></div>
<div my-widget data="item.obj"></div>
</li>
</ul>
</div>
</div>
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.
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 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>
it's me again :)
I am still at the very beginning with angularJS and I have just encountered a problematic issue.
I've got an array with some data that I want to be rendered on the page that's why I use ng-repeat but I also need to include another ng-repeat in the previous one.
I have the general ng-repeat="dialog in dialogWindows" and lower in the DOM ng-repeat="input in dialog.inputs", but the second ngRepeat dousnt work and it reports no errors in the coonsole. can You help me please?
Here is the JS:
var antroApp = angular.module('antroApp', []);
function dialogWindows($scope){
$scope.dialogWindows = [
{id:0,
idName:"pigmentation",
number:"1",
name:"Pigmentation",
answer1:"Clear complexion",
answer2:"Semi-swarthy complexion",
answer3:"Swarthy complexion",
answer4:"",
answer5:"",
answer6:"",
inputs:[{id:0,a:"a1",answer:"a"},
{id:1,a:"a2", answer:"b"}],
}
];
}
antroApp.controller('antroApp', antroApp);
and here is my HTML:
<div ng-controller="dialogWindows">
<div ng-repeat="dialog in dialogWindows">
<div id="{{dialog.idName}}" class="bold abs">
<div class="questionContainer rel">
<div class="menu abs">
<ul class="menuList">
<li id="menuStart" class=" unbold">Start</li>
<li id="menuAbout" class=" unbold">About</li>
<li id="menuTech" class=" unbold">Technology</li>
<li id="menuContact" class=" unbold">Contact</li>
</ul>
</div>
<div class="questionHeader"><div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div></div>
<div class="empty"> </div>
<div class="questionBody">
<div ng-repat="input in dialog.inputs">
<input type="radio" id="radio1" name="sex" value="male">
<label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div>
Next <i class="icon-arrow-right icon-white"></i>
<i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
</div><!--/pigmentation-->
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
Any help will be appreciated.Thanks
Just single mistake;
set <div ng-repeat="input in dialog.inputs">
instead <div ng-repat="input in dialog.inputs">
As a side note:
use <pre>{{input|json}}</pre> as basic debugger to detect the issue
see Fiddle
In your nested loop you have to use ng-repeat, instead of ng-repat. If you would strip off example markup from unnecessary garbage before posting question, you would probably find typo yourself.
Then, you're missing ng-app="antroApp" directive in example.
Then, controller is dialogWindows, not antroApp:
antroApp.controller('dialogWindows', dialogWindows);
Missing closing div, typo as per Nenad answer, same naming for App and Controller, same naming for controller and scope variable... ouch my mind hurts, anyways, here is the result at jsbin
EDIT: (as per minitech request)
this an alternative version, example in jsbin has unnecessary code in question removed
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body ng-app="myApp"> <!-- *myApp is antroApp app -->
<div ng-controller="myCtrl"> <!-- *myCtrl is dialogWindows ctrl -->
<div ng-repeat="dialog in data"> <!-- data is dialogWindows scope var -->
<div class="bold abs">
<div class="questionContainer rel">
<div class="menu abs">
<ul class="menuList">
<li id="menuStart" class=" unbold">Start</li>
<li id="menuAbout" class=" unbold">About</li>
<li id="menuTech" class=" unbold">Technology</li>
<li id="menuContact" class=" unbold">Contact</li>
</ul>
</div>
<div class="questionHeader">
<div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div>
</div>
<div class="empty"> </div>
<div class="questionBody">
<div ng-repeat="input in dialog.inputs">
<input type="radio" id="radio1" name="sex" value="male" />
<label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div> Next <i class="icon-arrow-right icon-white"></i>
<i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
</div><!--/questionContainer--> <!-- *missing div -->
</div><!--/pigmentation-->
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
<script>
var App = angular.module('myApp', []); //*myApp is in use now
App.controller('myCtrl', ['$scope', //*myCtrl is in use now
function ($scope) {
$scope.data = [{
id: 0,
idName: "pigmentation",
number: "1",
name: "Pigmentation",
answer1: "Clear complexion",
answer2: "Semi-swarthy complexion",
answer3: "Swarthy complexion",
answer4: "",
answer5: "",
answer6: "",
inputs: [{
id: 0,
a: "a1",
answer: "a"
}, {
id: 1,
a: "a2",
answer: "b"
}]
}];
}]);
</script>
</body>
</html>