displaying bootstrap thumbnails in angularjs - javascript

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.

Related

Adding some logic in v-for with v-if Vue

I have some json with below results
{
"module": [
{
"id": 1,
"title": "Module 1",
"type": "URL",
"size": 1,
"image": "https://localhost/image1.png"
},
{
"id": 2,
"title": "Module 2",
"type": "YOUTUBE",
"size": 2,
"image": "https://localhost/image2.png"
}
]
}
Now i want to render it on a page with some loop and conditional, like below
<template>
<section class="page-section homescreen mt-4">
<div class="container">
<div class="row">
<div class="col-lg-3" v-bind:key="data.index" v-for="data in modules" v-if="data.size == 1">
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
<div class="col-lg-6" v-bind:key="data.index" v-for="data in modules" v-if="data.size == 2">
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
modules: [
{
"id": 1,
"title": "Module 1",
"type": "URL",
"size": 1,
"image": "https://localhost/image1.png"
},
{
"id": 2,
"title": "Module 2",
"type": "YOUTUBE",
"size": 2,
"image": "https://localhost/image2.png"
}
]
};
}
};
</script>
But instead of success, i got some error saying
5:99 error The 'modules' variable inside 'v-for' directive should be
replaced with a computed property that returns filtered array instead.
You should not mix 'v-for' with 'v-if' vue/no-use-v-if-with-v-for
8:99 error The 'modules' variable inside 'v-for' directive should be
replaced with a computed property that returns filtered array instead.
You should not mix 'v-for' with 'v-if' vue/no-use-v-if-with-v-for
Actually i want to create the <div class="col-lg-3"> part to be dynamic based on the json, if size:1 mean to have col-lg-3 and if size:2 mean to have col-lg-6
Any explanation and suggestion will be appreciated.
Thank you
eslint-plugin-vue was telling you to do this:
<div class="col-lg-3" v-bind:key="data.index" v-for="data in modules.filter(o=>o.size == 1)">
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
<div class="col-lg-6" v-bind:key="data.index" v-for="data in modules.filter(o=>o.size == 2)">
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
In your case, it can be simplified as
<div :class="'col-lg-'+data.size*3" v-bind:key="data.index" v-for="data in modules">
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
If it's essentially something with css classes, why don't you use v-bind:class or :class with your condition ?
https://v2.vuejs.org/v2/guide/class-and-style.html
But like said in the error message you'll certainly have to create a sub component and then use props on it
https://v2.vuejs.org/v2/guide/components-props.html
In case you have just two sizes:
You can use Computed Properties to achieve this requirement.
First, create two new computed properties like:
computed: {
modulesSize1: function() {
return this.modules.filter(x => x.size == 1)
},
modulesSize2: function() {
return this.modules.filter(x => x.size == 2)
}
}
Now, you can easily loop through computed properties modulesSize1 && modulesSize2 like:
<div class="row">
<div class="col-lg-3" v-bind:key="data.index" v-for="data in modulesSize1" >
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
<div class="col-lg-6" v-bind:key="data.index" v-for="data in modulesSize2" >
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
</div>
In case you have multiple sizes:
First, create a simple method like:
methods: {
getClass: function(size) {
return `col-lg-${size * 3}`
},
}
and then we can update template and use Class Bindings like:
<div :class="getClass(data.size)" :key="data.index" v-for="data in modules">
<img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>
The v-if is essentially baked in to the v-for (if modules is empty nothing will render) so it's recommended not to use them in combination. If you need it for a separate condition, like you do here, then you'll have to move your v-for on to the <img> itself.
You also won't be able to use data.size this way so you'd have to use something like v-if="modules[0].size == 1" etc.
Edit
#Palash answer is probably the more efficient way to solve this.
Edit 2
#r0ulito and #xianshenglu also makes a really good point, if it's just a class issue, use v-bind.

How to get angular js expressions to consider css values from the api and apply it to its card

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>

How to call out multiple JSON objects in Angular

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"

AngularJS: How to use the ngRepeat directive together with arrays and subarrays?

Let's assume there is an array of categories. Contained within this array, for each category, there is a variable number of images. Additionally, each image has a sub-array of paths for varying sizes of each image. Listed below is an example.
$scope.categories = [
{ "id": 1, "name": "Fashion", "images": [
{ "id": 1, "paths": [
{ "id": 1, "pathThumb":"thumbnail_A.jpg"},
{ "id": 2, "pathFull":"full_size_A.jpg"}
]}
]},
{ "id": 2, "name": "Sunsets", "images": [
{ "id": 1, "paths": [
{ "id": 1, "pathThumb":"thumbnail_B.jpg"}
{ "id": 2, "pathFull":"full_size_B.jpg"}
]},
{ "id": 2, "paths": [
{ "id": 1, "pathThumb":"thumbnail_C.jpg"}
{ "id": 2, "pathFull":"full_size_C.jpg"}
]}
]}
];
I would like to use the AngularJS ngRepeat directive to loop through the above data to produce the following
<div class="item fashion">
<img src="thumbnail_A.jpg">
</div>
<div class="item sunset">
<img src="thumbnail_B.jpg">
</div>
<div class="item sunset">
<img src="thumbnail_C.jpg">
</div>
I assume it would look something like the following:
<div class="item {{category.name}}" ng-repeat="...">
<img src="{{category.image.path.pathThumb}}">
</div>
I am not sure how to loop through an array with sub-array and extract the appropriate data. Any help would be greatly appreciated.
Use like:
<div ng-repeat="item in categories">
<div ng-repeat="image in item.images">
<a ng-href="{{image.paths[1].pathFull}}">
<img ng-src="{{image.paths[0].pathThumb}}">
</a>
</div>
</div>
you should use a wrapper container in order to get subarray of categories..
HTML
<div ng-repeat="category in categories">
<div class="item {{category.name | lowercase}}" ng-repeat="image in category.images">
<a ng-href="{{image.paths[1].path}}">
<img ng-src="{{image.paths[0].path}}">
</a>
</div>
</div>
here I used dynamic class with ng-class and using lowercase filter to get lowercase version of name string as class...
using ng-src as src attribute of img is important here because sometimes given interpolate ({{something}}) cause fail to load resource, because of data is not fecthed...
same thing for ng-href...
here is PLUNKER...

Passing data into foundation modals using angularjs repeater

I'm making a "members" page for a website, which has 3 columns of pictures and names for each member. I want to be able to click on the picture to get more information about that member (via Foundation's modal). I'm using a repeater to display the pictures, but I'm stuck on how to pass member data into the modal so that when I click on person A, the modal will have person A's data.
Here is what I have so far:
I store the members as a json list in members.json:
{
"current" : [
{
"name": "Bob",
"pic": "http://www.placehold.it/300x300",
"id": "blah",
"position": "position 1",
"bio": "Hi I am Bob"
},
{
"name": "Bobby",
"pic": "http://www.placehold.it/300x300",
"id": "blah",
"position": "position 2",
"bio": "Hi I am Bobby"
}
]
}
And here is my controller, uses the json file:
var app = angular.module('app').controller('memberCtrl', ['$scope', '$http', function ($scope, $http) {
'use strict';
$http.get('/data/members.json').success(function(data) {
$scope.members = data;
$scope.numColumns = 3;
$scope.current_rows = [];
$scope.current_rows.length = Math.ceil($scope.members.current.length / $scope.numColumns);
$scope.current_cols = [];
$scope.current_cols.length = $scope.numColumns;
});
}]);
And here is my html:
<!-- My attempt at the modal -->
<div ng-controller="memberCtrl" id="myModal" class="reveal-modal">
<div class="row">
<div class="large-3 columns">
<img src="http://www.placehold.it/300x300">
</div>
<div class="large-6 columns">
<center>
<!-- The following remains blank -->
<h2>{{members.current[$parent.$index * numColumns + $index].name}}</h2>
</center>
<p class="lead">Bio.</p>
<p>Hi</p>
</div>
<div class="large-3 columns">
<img src="http://www.placehold.it/300x300">
</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- This creates a 3 column array of member profiles (it works) -->
<div ng-controller="memberCtrl">
<div class="row" data-ng-repeat="row in current_rows">
<div class="large-4 columns" data-ng-repeat="col in current_cols">
<img ng-src="{{members.current[$parent.$index * numColumns + $index].pic}}">
<center>
<small><h3>{{members.current[$parent.$index * numColumns + $index].name}}</h3></small>
<small><h4>{{members.current[$parent.$index * numColumns + $index].position}}</h4></small>
</center>
</div>
</div>
</div>
Add ng-click attr in the img:
<img ng-src="{{members.current[$parent.$index * numColumns + $index].pic}}"
ng-click="loadMember(members.current[$parent.$index * numColumns + $index]);"/>
And add the function in the controller:
$scope.loadMember = function (member) {
//you should be able to access the current member
console.log(member);
}
Demo on jsFiddle

Categories

Resources