Develop Reference

Plugin not applying changes on ngFor directed div Angular 5.2

I've been searching for the solution for a few days but unable to find one that works. The issue is that this div which has a class ish-container-inner, is linked to a js plugin which works only with this code below:
<div class="ish-container-inner ish-product">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color9">Special Effects</span> <span class="ish-separator">/</span> <span>Ink</span></div>
</div>
<div class="ish-img">
<img src="assets/img/bniinks-003.jpg" alt="Project">
</div>
</div>
</div>
</div>
</div>
But as soon as I'll put *ngFor like below, it won't work. Even with ngIf present:
<div class="ish-container-inner ish-product" *ngIf="products">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item" *ngFor="let product of products">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color7">{{ product.name }}</span> <span class="ish-separator">/</span> <span>Ink</span>
</div>
</div>
<div class="ish-img">
<a href="product-detail.html" class="ish-img-scale" [style.background]="'url('+product.thumbnail+')'">
<img src="{{product.thumbnail}}" alt="Project"></a>
</div>
</div>
</div>
</div>
</div>
I have valid data at this point in products but the plugin is not working for these div elements. I don't know why. Without the ngFor directive. Div is assigned some stylings automatically which are changed by the plugin on scroll i.e.
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax" style="position: relative; height: 629px; margin-top: -99.5455px;" data-initial-top="0">
But if I put ngIf or ngFor directive. It doesn't work anymore and these stylings are not assigned automatically. Awaiting response :)

In meteor, how to create dynamic id with same class name

I have a card displaying dynamically when I submit the form.
Here is code:
<template name="workflow">
<div id="newActionCard">
{{#each newaction}}
<div class="workflowcard">
<div class="module-card-small">
<div class="res-border"></div>
<div class="card-img">{{team}}</div>
<div class="res-content">
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="newaction-des">{{description}}</div>
<!-- <div class=" due-on">Due on:{{d_date}}</div><hr>-->
</div>
<div class="due">
Due on:
<div>
<div class="day-stamp">{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
{{> actioncardsubcontent}}
</div>
<div class="btn-box">
<button type="button" class="cancelsub">New Action</button>
<button type="submit" class="createbtnsub">Show Options</button>
</div>
</div>
{{/each}}
</div>
</div>
</template>
<template name="actioncardsubcontent">
<div class="subcontent">
<div class="modulepath"><div>{{module_list}}</div></div>
<div class="linkto"><div>Linked To: <div class="linkto-color">{{link}}</div></div></div>
<div class="description"><div>Notes:<br>{{description}}</div></div>
</div>
</template>
when I submit the form the card gets generated with some hidden part by the below JS.
Template.actioncardsubcontent.rendered = function(){
this.$(".subcontent").hide();
};
When I click on "Show Options" button the hidden part will display. and below is the code for that
Template.workflow.events({
"click .createbtnsub":function(){
$('.subcontent).show();
}
});
My question is, when I click on show options button at the output the hidden part is displaying for each card at a time not to the particular card. The reason is I have given the same class name for each and I want to create a dynamic id that allos particular card hide content on click. How to write it. I am stuck there. Can anyone help?
I have tried with below code but it doesn't work.
<div class="action" id={{_id}}> {{> actioncardsubcontent}} </div>
and in JS i replaced $('.subcontent').show(); with var id="#"+this._id; $(id).show(); but it doesn't work. Let me know how to I write for dynamic Id generation for each click.

The idea of your id={{_id}} solution is correct, but you have added the id attribute to a different element than what you hide. Try this:
<template name="actioncardsubcontent">
<div class="subcontent" id={{_id}}>
...
</div>
</template>
Your event handler in the upper template should still find the element if you do
$('#' + this._id).show();
If this does not help, it may be because your data does not have an _id attribute. In that case you could use some other unique identifier or add one with Random.id().

You can try this as this has worked for me.
function(){
$('.className').each(function(i) {
$(this).attr('id', 'idName'+i);
});

Using AngularJS to show divs based on select value

I'm trying to use an HTML select element's value to show or hide certain div tags with AngularJS. Here is my code:
<body ng-app="kiosk" id="ng-app" >
<div class="page" ng-controller="kiosk-controller" ng-cloak="true">
<section class="signin">
<div class="intro">
<h1 id="service-desk-name">{{servicedeskname}}</h1><br></br>
<h4 id="welcome">{{welcome}}</h4>
</div>
<hr></hr>
<form id="form" name="form">
<div>
<label>Do you have an ID?</label><br></br>
<select type="select"
ng-model="user.affiliated"
ng-required="true"
ng-options="opt as opt.name for opt in affiliate.affiliateOptions">
<option value="">--Select an answer--</option>
</select>
</div>
<div ng-switch="user.affiliated">
<div ng-switch-when="Yes">
<!--><-->
</div>
<div ng-switch-when="No">
<!--><-->
</div>
</div>
And here is the Javascript snippet:
var kiosk = angular.module('kiosk',[]);
kiosk.controller('kiosk-controller', ['$scope', function($scope, $user) {
$scope.servicedeskname = 'Service Desk';
$scope.welcome = 'Please sign in and a consultant will be with you shortly.';
$scope.affiliate = {affiliateOptions:[]};
$scope.affiliate.affiliateOptions = [
{ name: 'Yes' },
{ name: 'No' }
];
/*other stuff*/
};
I can't figure out the proper way to reference the select options in the HTML tags using ng directives. Unless it's not super clear, I want to be able to show one div if the select value is "Yes", and show another if the select value is "No".

I think the switch statement you use need small modification
<div ng-switch on="user.affiliated">
<div ng-switch-when="Yes">
<!--><-->
</div>
<div ng-switch-when="No">
<!--><-->
</div>
</div>
check this ng-switch documentation for more help

I believe you're looking for ng-show and ng-hide.
<div ng-show="user.affiliated === 'Yes'"></div>
<div ng-show="user.affiliated === 'No'"></div>
And try changing this line to this:
ng-options="opt.name as opt.name for opt in affiliate.affiliateOptions">

You forgot the name property in the switch statement.
- <div ng-switch="user.affiliated">
+ <div ng-switch="user.affiliated.name">
As can be viewed in jsfiddle

you just have a little mistake. you must have user.affiliated.name instead of user.affiliated
like this
<div ng-switch="user.affiliated.name">
<div ng-switch-when="Yes">
yes
</div>
<div ng-switch-when="No">
no
</div>
</div>

AngularJS/CSS Move one div out and another in on the same modal

I am working on an app and want to use AngularJs for doing this :-
<div class="main">
<div class="one">Content 1 here ...</div>
<div class="two">Content 2 here ...</div>
</div>
div one contains a button which on click brings out div two and replaces div one.
Can anyone help regarding this, (Do i need to use ng-Animate or a better CSS trick) ?
EDIT: I will make it a little more clear
Div one has a list and a button called ADD which on click brings a list which is in div two, I select what to add and then submit, the list in div one appears updated.

Try this JS FIDDLE
HTML
<div ng-app="myApp">
<div ng-controller="listCtrl">
<div class="one">
<ul>
<li ng-repeat="list in lists">{{list}}</li>
</ul>
<button ng-click="showOptions = !showOptions">{{showOptions?'Hide':'Show'}} Options</button>
</div>
<div class="two" ng-show="showOptions">
<ul>
<li ng-repeat="list in options" ng-click="add($index)">{{list}}</li>
</ul>
</div>
</div>
Controller
var myApp = angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.lists =['Monday','Tuesday'];
$scope.options =['Sunday','Saturday'];
$scope.add = function(index){
$scope.lists.push($scope.options[index]);
$scope.options.splice(index,1);
};
});

dropzone.js programmatically doesn't work

I am trying create drop zones programmatically, but it doesn't work.
HTML Code:
<div class="content-wrap">
<div class="row">
<script type="text/javascript">
$(function() {
$("div#myDropZone").dropzone({
url : "/file-upload"
});
});
</script>
<div class="col-sm-12">
<div class="nest" id="DropZoneClose">
<div class="title-alt">
<h6>DropZone</h6>
</div>
<div class="body-nest" id="DropZone">
<div id="myDropZone" >
</div>
<button style="margin-top: 10px;" class="btn btn-info"
id="submit-all">Submit all files</button>
</div>
</div>
</div>
</div>
</div>
The drop zone in <div id="myDropZone"> not appers!
best regards :)

You need to give your #myDropZone div some width and height so that it takes up space. Heres a jsfiddle.
Alternatively, you can add the dropzone class to your div to get the default styling that you see in the demos. Heres the jsfiddle for that.

Add class dropzone to the div element which holds your drop zone.
Hope that you have added the dropzone stylesheet to your page.