I am trying to call multiple objects from my JSON file for various different sections on my site. As it stands i have the jobs and a misc section for section titles etc. With my HTML i have the following
<h2>{{job.jobTitle}}</h2>
This works fine. However the misc section doesn't display any content
<h1>{{title.widgetTitle}}</h1>
plunkr
"jobs": [
{
"jobTitle": "Senior Accountant",
"sector": "Accounting & Finance",
"link": "/jobs/1"
},
],
"title": [
{"widgetTitle": "Latest Jobs"}
]
HTML
<div class="tickr-container" data-ng-controller="tickCtrl">
<div>
<h1>{{title[0].widgetTitle}}</h1>
</div>
<div>
<h3>{{date | date:'fullDate' : 'GMT'}}</h3>
<ul ng-mouseover="stopAuto()" ng-mouseleave="startAuto()" class="tickrSlider">
<li class="tickrSlider-slide" ng-class="{'job-active' :isActive($index)}" data-ng-repeat="job in jobs">
<div class="tickrSlider-inner">
<h2>{{job.jobTitle}}</h2>
<p>{{job.sector}}</p>
<a class="tickrSlide-info" href="{{job.link}}">{{job.link}}</a>
</div>
</li>
</ul>
Shouldn't you reference title[0].widgetTitle?
<h2>{{job.jobTitle}}</h2> appears fine since you reference the job object from data-ng-repeat="job in jobs"
Related
I'm creating pokemon cards that take data from the API. How can I get the CSS of a particular card get applied to its respective card from the API directly just like the information which I've rendered using angular-js.
I'm done retrieving the data like name, description and image.I used angular-js directives to get the data.Similarly, the API consists of CSS styling for each of their respective cards.How can I get the CSS of a particular card get applied to its respective card from the API directly just like the information which I've rendered using angular-js.
JSON:
[{
"cardColors": {
"bg": "#47C67B",
"imgbg": "#80EDAC",
"tagbg": "#8edbae",
"text": "#ffffff",
"textbg": "#66CF91"
},
"description": "Bulbasaur is a small quadruped Pokemon that has turquoise skin with darker teal patches ",
"name": "Bulbasaur",
"sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
"tag": "Grass"
}, {
"cardColors": {
"bg": "#f88321",
"imgbg": "#ffb047",
"tagbg": "#fab275",
"text": "#ffffff",
"textbg": "#f99847"
},
"description": "Pikachu is a Mouse Pokemon and the evolved form of
Pichu. Pikachu's tail is sometimes struck by lightning as it raises it to
check its surroundings.",
"name": "Pikachu",
"sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png",
"tag": "Electric"
}]
JS:
var app = angular.module('myApp', []);
app.controller('pokemonCtrl', function($scope, $http) {
$http.get("pokemondata.json").then(function (response) {
$scope.myData = response.data;
});
});
HTML:
<div class="container" ng-app="myApp" ng-controller="pokemonCtrl">
<div class="row">
<div class="col-sm-4" ng-repeat="x in myData">
<h4>{{x.name}}</h4><br/>
<p>{{x.description}}</p><br/>
<img class="cards" ng-src="{{x.sprite}}"><br/>
</div>
</div>
</div>
You should use ngStyle to apply styles from your controller data to your list elements. Something like:
<div class="row">
<div class="col-sm-4" ng-repeat="x in myData" ng-style="{'background-color': x.bg, color: x.text}">
<h4>{{x.name}}</h4><br/>
<p ng-style="{'background-color': x.textbg}">{{x.description}}</p><br/>
<img class="cards" ng-src="{{x.sprite}}"><br/>
</div>
</div>
I am trying to create bootstrap navbar menus dynamically using Angular.
The source data for the menu comes from json which looks like below:
{
"Menu": [
{
"title": "Individual",
"url": "#",
"subMenu": [{
"title": "Individual Address",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
}]
},
{
"title": "Organisation",
"url": "#",
"subMenu": [{
"title": "Organisation Address",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
},{
"title": "Organisation Contact",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
},{
"title": "Organisation Sector",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
}]
},
{
"title": "Return",
"url": "http://www.w3schools.com/js/default.asp",
"subMenu": []
}
]
}
As you can see that there are nested items so we need to have dropdown menus in our navigation bar.
I have created a directive to generate the dynamic menus (I have used the directive found here as a starting point). The modified version of the directive looks like:
app.directive('tree', function ($compile) {
return {
restrict: 'E',
terminal: true,
scope: { val: '=', parentData:'=' },
link: function (scope, element, attrs) {
if (scope.val.subMenu !== undefined && scope.val.subMenu.length > 0) {
template = '<li class="dropdown"> '+
' <a class="dropdown-toggle" data-toggle="dropdown" href="{{val.url}}">{{val.title}} '+
' <span class="caret"></span></a> '+
' <ul class="dropdown-menu"> '+
' <div ng-repeat="item in val.subMenu"> '+
' <tree val="item" parent-data="val.subMenu"></tree> '+
' </div>'
' </ul> '+
'</li> ';
}
else
{
template = '<li>{{val.title}}</i> ';
}
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
}
Below is the html code where I am using this directive
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div ng-repeat="menu in menuFamily.Menu">
<tree val="menu"></tree>
</div>
</ul>
</div>
</nav>
</div>
</div>
The menus are generated but because I am using div tags for ng-repeat, the menus are not rendered properly. However, if I remove the div tags from the generated html everything works fine. So my question how can I achieve what I want without using div tags.
You can also find my sample code at plunker
P.S. I am new to Angular world and I have a very basic knowledge of directives.
If I understand your question correctly, there are two things you need to do:
Correct usage of ng-repeat
ng-repeat can be applied directly to your tree directive. Change
<div ng-repeat="...">
<tree ...>
</div>
To
<tree ng-repeat="..." />
Both in your html file and in your directive's template property.
This will apply the proper styles to your menu.
Import Bootstrap js and initialize dropdowns
Because Angular will modify the DOM to add your dropdown's HTML, you need to manually initialize the dropdowns once they have been added.
Call $('.dropdown-toggle').dropdown() once your elements have been added.
Nevermind, just add the Bootstrap JS in your page, seems it properly initializes by itself.
<script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery#*"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Editied plunkr is here.
I have a simple angularjs app with a simple array in a controller.
(function () {
"use strict";
angular.module('stylistFormulas').controller('ServiceTypesCtrl', ServiceTypesCtrl);
function ServiceTypesCtrl() {
var vm = this;
vm.serviceTypes = [
{
"text": "Retouch",
"image": "serviceTypes/images/Retouch.jpg",
"id": "retouch"
},
{
"text": "All Over",
"image": "serviceTypes/images/AllOver.jpg",
"id": "allover"
},
{
"text": "Highlights/Lowlights",
"image": "serviceTypes/images/Highlight.jpg",
"id": "highlight"
},
{
"text": "Ombre, Balayage, Sombre",
"image": "serviceTypes/images/Balayage.jpg",
"id": "ombre"
}
]
};
}());
I want to display these records similar to bootstraps thumbnail, custom content example but using bootstraps grid with two columns for larger screens and 1 for xs.
i.e.
image image
Title of Image Title of image
image image
Title of Image Title of image
image
Title of Image
I have tried numerous examples I have found on the web with no luck. I usually get just one column or nothing but the layout without the data.
My latest attempt...
<div ng-repeat="serviceType in vm.serviceTypes">
<div class="row | $index % 3 == 0">
<div class="col-sm-6">
<div class="thumbnail">
<img ng-src="{{serviceType.image}}" />
<div class="caption">
<h3>{{serviceType.text}}</h3>
</div>
</div>
</div>
</div>
</div>
How can I display this data using the ng-repeat or something else?
Thanks
<div class="row | $index % 3 == 0"> instead
can you try with
<div ng-class="row | $index % 3 == 0">
Because you cant do manipulations inside a HTML attribute.
I have created a code and I'm repeatable in text with icon.
You see the img but I want to hide to this actually I show this image if I have a anchor link than show if I have no link than not show this image. Is this possible in angular js?
My code is:
Angular Code is
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function($scope) {
$scope.items = [
{
"title":"Book" ,"subtitle":[
{"subtitle":"PanchTantra ",
"description":"Kids Books",
"authorName":"Kisna"
}
],
"description": "Some Book is very Good."
},
{
"title":"Mediciane Book" , "subtitle":[
{"subtitle":"Pharmacy", "description":"This book is related to Docotrs"}
],
"description": "This book is very hard"
},
{
"title":"Reciape Book" , "subtitle":[
{"subtitle":"Khana Khajana", "description":"This book is related to Foods"}
],
"description": "This book is nice..."
},
{
"title":"Computer Book" , "subtitle":[
{"subtitle":"BCA MCA", "description":"This book is related to Education"}
],
"description": "This book is very beautiful."
}
];
});
HTML Code is
<body ng-app="myFapp">
<ul ng-controller="myControler">
<li ng-repeat= "item in items">
<div>{{item.title}} </div>
<div>{{item.description}}</div>
<ul>
<li ng-repeat="subtitle in item.subtitle">
<div>{{subtitle.subtitle }} <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}} </div>
<div>{{subtitle.description}} this is </div>
</li>
</ul>
</li>
</ul>
</body>
Plunkr link is
Is this what you want to do ?
<div>{{subtitle.subtitle }} <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}} </div>
http://plnkr.co/edit/6tnGlTLeLUZdiGCUHDFV?p=preview
The ng-show directive allows you to show or hide the given HTML element based on the expression provided.
See the Official doc
I want to display the json in a certain format with ng-repeat, but have had no success.
This is the structure:
<div ng-repeat="book in books">
{{book}}
<div ng-repeat="name in book.name" >{{name}} </div>
</div>
THis is the structure how I want it to display on the page:
Genre:
Sci-fic
Bookname1
Bookname2
Non sci-fic
Bookname3
Bookname4
This is the json sample:
[{"Genre":Sci-fic,"Name":"Bookname1"},
{"Genre":Sci-fic,"Name":"Bookname2"},
{"Genre":Non sci-fic,"Name":"Bookname3"},
{"Genre":Non sci-fic,"Name":"Bookname4"}]
http://jsfiddle.net/HB7LU/4053/
Should/Need to fix/restructure your JSON
$scope.books = [
{
"genre": "Sci-fic",
"titles" : ['Bookname1', 'Bookname2']
},
{
"genre": "Non sci-fic",
"titles" : ['Bookname3', 'Bookname4']
},
];
<div ng-repeat="book in books">
{{book.genre}}
<div ng-repeat="title in book.titles" >{{title}}</div>
</div>
Wouldn't it be easier if you format the json object that you receive like this?:
[{
"name": "Sci-Fic",
"names":["book 1","book 2"]
},
{
"name": "Another Genre",
"names":["book 1","book 2"]
}
]
Why don't u use ul and li? just another approach.
<ul>
<li ng-repeat="genre in books">
{{genre.name}}
<ul>
<li ng-repeat="name in genre.names">{{name}}</li>
</ul>
</li>
</ul>
Hope it helps :D
---Edit---
Sry, didn't see #Christopher Marshall answer while i was writing, its the same thing.
If the data MUST be in that format you can do this:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div data-ng-repeat="genre in data | orderBy:'Genre'">
<span data-ng-if="(data | orderBy:'Genre')[$index - 1].Genre != genre.Genre">
{{ genre.Genre }}
</span>
<div style="padding-left: 30px;">{{ genre.Name }}</div>
</div>
</div>
</div>
Here's a jsFiddle of it: http://jsfiddle.net/wgLnH/