I am returning an array of data like such:
"Tools": [
{
"name": "Online Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
},
What I am trying to get it to do is simply render the div is the "isOn" is set to true. Wouldn't think I would have to do this in an ng-repeat since I am laying it out in the code for each scenario as shown below (as each div contains different text and graphic):
<div ng-if="pptTools.isOn ==true" class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
Seems to check the ng-if and tries to render in dev tools, but no div is show. Here is a screenshot of that:
Any help on this please?
Thanks much.
You should return an object instead of an array:
"Tools": {
onlineenrollment: {
"name": "Online Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
},
...
}
Then you can check each item without the ng-repeat
<div ng-if="ppt.Tools.onlineenrollment.isOn" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
Alternatively you can reference items in an array with their index, but you shouldn't unless you are completely confident that the order will be consistent every time. I wouldnt do this...
<div ng-if="ppt.Tools[0].isOn" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
You could also check out https://docs.angularjs.org/api/ng/function/angular.forEach
I believe you need a filter. You can pass this array to your filter and use it in ng-repeat. Let's say this array is saved in the controller as $scope.tools and you named your filter as onTools. Then you'd write your code like this (I assumed each tool had attributes for url, img src and name and you want to display them):
<div class="toolTile col-md-3" ng-repeat="tool in tools | onTools">
<a href="{{tool.url}}">
<img src="{{tool.imgSrc}}" >
<p>{{tool.name}}</p>
</a>
</div>
Try with below code.
---------------------
<div ng-app="myApp">
<div ng-controller="PatientController">
<div ng-repeat ="pptTools in pptToolsArray">
<div ng-if="pptTools.isOn ==true" class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
-----
</div>
</div><div>
var myApp = angular.module('myApp', []);
function SampleController($scope) {
$scope.pptToolsArray= [{
"name": "Online Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
},{
"name": "offline Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": false,
"alert": null
},{
"name": "No Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
}];
}
Related
I'm attempting to create a set of div's based on the number of iterations of an element.
The element created is an image and depending on the page there is a variable number generated by the server, contained in a parent div.
The HTML is:
<div id="thumbImageList">
<div class="thumbSlides"> //parent div
<div class="col-3 col-md-3"> //child div that is generated
<a href="#">
<img src="img1.png">
</a>
</div>
<div class="col-3 col-md-3"> //child div that is generated
<a href="#">
<img src="img2.png">
</a>
</div>
// Child Div repeated per number of images available.
</div>
</div>
The Child div's need to be separated into groups of no more than 4. I was intending to do this with JS, maybe using an array, but have not been able to get anything to work so far.
Edit:
To be clear, the templated code is:
<div id="thumbImageList">
//parent div
<div class="thumbSlides">
[%THUMBNAILS%]
[%param *body%]
//child div that is reproduced per the number of images available.
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]">
<img src="[#thumb_image#]" class="img-fluid product-image-small">
</a>
</div>
[%/ param%]
[%/ THUMBNAILS%]
</div>
</div>
The template is parsed by the server before handing it off to the browser with the HTML structure provided above.
The sets of 4 images are intended to be inside a new iteration of the parent div. So the result would be:
<div id="thumbImageList">>
<div class="thumbSlides">
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]1">
<img src="[#thumb_image#]1" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]2">
<img src="[#thumb_image#]2" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]3">
<img src="[#thumb_image#]3" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]4">
<img src="[#thumb_image#]4" class="img-fluid product-image-small">
</a>
</div>
</div>
<div class="thumbSlides">
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]5">
<img src="[#thumb_image#]5" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]6">
<img src="[#thumb_image#]6" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]7">
<img src="[#thumb_image#]7" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]8">
<img src="[#thumb_image#]8" class="img-fluid product-image-small">
</a>
</div>
</div>
</div>
Update:
I have managed to create the required div's thanks to Henry Manuel's input. using the following:
var w = document.getElementById('thumbImageList');
var n = w.childElementCount / 4;
for(var i=0; i<n; i++){
$("#thumbImageList").append(
'<div class="thumbSlides">'
);
};
Now from what I can see, I need to place the child div's into the new parents.
Take this basic example and modify it based on what you need.
<html>
<body>
<div id="idAttr">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var n = 5;
for(var i=0; i<n; i++){
$("#idAttr").append(
'<img src="https://images.pexels.com/photos/5549976/pexels-photo-5549976.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> '
);
};
</script>
note that var n = 5, this will represent the number of times you are getting from the server
I've solved this using a simple jQuery function:
$("#thumbImageList div").slice(start, end,).wrapAll(
'<div class="thumbSlides">'
);
Then I just iterate this string based on the number of images.
i want use custom js variable to get card-title a shop-item-title-link's text for the event label = "product x".
Clicking the click class fa-cart-plus to get the label product x;
Click the image to get the label product x
I've tried this js below, but it gets [object] [object] as the result.
function() {
var el = {{Click Element}};
return $(el).closest('card-title').text('a.shop-item-title-link');
}
HTML
<div class="card card-product">
<div class="card-image">
<a href="#" title="product x">
<img width="230" height="230" src="#" class="attachment-_thumbnail" alt="product x">
</a>
<div class="ripple-container"></div>
</div>
<div class="content">
<h6 class="category">Items</h6>
<h4 class="card-title">
<a class="shop-item-title-link" href="#" title="product x">product x</a>
</h4>
<div class="card-description">
<p><span>product descirption</span></p>
</div>
<div class="footer">
<div class="price">
<h4><span class="Price"><span class="Price-currencySymbol">£</span>45.00</span></h4>
</div>
<div class="stats">
<a rel="nofollow" href="#" title="Add to cart">
<i rel="tooltip" data-original-title="Add to cart" class="fa fa-cart-plus"></i>
</a>
</div>
</div>
</div>
</div>
That is a very specific target, what you want to do is use parent and sibling together.
Try something like this:
return $(el).parents().siblings('.card-title').text();
I have an owl carousel that has a toggle button displayed above it. In the carousel there is a boys set of golf clubs and a girls set of golf clubs. I want users to be able to toggle between the 2 sets but I am a beginner at javascript/jquery. Can someone point me in the right direction to achieve this? Thank you.
<section>
<div class="input-wrap">
<input id="input-7" checked="" type="checkbox">
<label for="input-7">Select</label>
</div>
</section>
<div class="col-xs-12">
<div class="row containerCarousel">
<div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
<div id="home-carousel" class="owl-carousel homeCarousel">
<div class="slide">
<a href="#">
<img src="images/FB/Bag-Bl#2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive boy"/>
<img src="images/FB/Bag-Pnk#2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive girl"/>
</a>
<h3>01. WHOLE BAG</h3>
</div>
</div>
</div>
</div>
</div>
It's just 1 carousel but I'm trying to incorporate a toggle switch to display a new set of images.
I suggest you to use data-* attributes and the jQuery .data() method then. And use only one image per .slide... Then toggle the src.
$("#boyGirlToggle").on("click",function(){
// Button's text
if($(this).text() == "Boys"){
$(this).text("Girls");
dataAttr = "girls";
}else{
$(this).text("Boys");
dataAttr = "boys";
}
// Change image src.
$(".slide img").each(function(){
$(this).attr("src",$(this).data(dataAttr));
});
}).trigger("click");
$("#home-carousel").owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<section>
<div class="input-wrap">
<input id="input-7" checked="" type="checkbox">
<label for="input-7">Select</label>
</div>
</section>
<br>
<button id="boyGirlToggle">Girls</button><br>
<br>
<div class="col-xs-12">
<div class="row containerCarousel">
<div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
<div id="home-carousel" class="owl-carousel homeCarousel">
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys1" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls1"/>
</a>
<h3>01. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys2" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls2"/>
</a>
<h3>02. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys3" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls3"/>
</a>
<h3>03. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys4" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls4"/>
</a>
<h3>04. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys5" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls5"/>
</a>
<h3>05. IMAGE</h3>
</div>
</div>
</div>
</div>
</div>
Have a look in full page mode... ;)
I am building a web App using Angular 2 and want to loop the button with the list items but outside of list items, how can I get the functionality using *ngFor, please help.
My HTML code:
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right" >
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6"> <-----I WANT TO LOOP THIS BUTTON
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
Try this code snippet. I have created a div tag above linking both content and then added the loop inside that, so it will refer to both elements (item and button).
<div *ngFor="let buying of buy">
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right">
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6">
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
</div>
Am cycling through an array inside of an array of objects as:
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="Features.value in oe.oeBenefits.Features">{{ Features.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
</div>
My JSON code returns the following, but getting that value just isn't happening despite changes. Here is the JSON returned:
"oeBenefits": [
{
"planId": "l0t3AlfKV%2fETUaQd0zZJGA%3d%3d",
"benefitTypeId": 1,
"benefitName": "Health Care FSA",
"isHsaAvailable": false,
"benefitMin": 0,
"benefitMax": 3510,
"numberOfContributions": 12,
"carryoverAmount": null,
"isDebitCard": true,
"is100percent": true,
"isGracePeriod": true,
"allowDirectDeposit": true,
"claimsRunout": 90,
"employerSeed": "Your employer will contribute additional funds to your benefit",
"learnMoreUrl": "http://www.naviabenefits.com/participants/benefits/health-care-fsa/",
"Features": [
{
"key": "0",
"value": "Navia Benefits Card"
},
{
"key": "2",
"value": "FlexConnect"
},
{
"key": "4",
"value": "Online claim submission"
},
{
"key": "5",
"value": "Online card swipe substantiation"
}
]
},
All the other repeated data from the object(s0 return just fine, just this features part where I want just the value, not the key.
this should resolve your problem for you
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
The problem is with your inner loop you are not using the correct array object
You should do <li ng-repeat="Features in oe.oeBenefits.Features">{{ Features.value }}</li> instead of <li ng-repeat="Features.value
you have a nested ng-repeat, so in your case your ng-repeat should look this
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>