Develop Reference

jQuery plugin for repeating divs

How do I access, div with class name fire in this for a function or in general access nested div class?
//this doesn't seems to work
function lightCandle(){
$(".fire").show();
}
<div class="dom" id="dom" style="display: none">
<div class="happydiwali" id="happydiwali">
<div class="candle"></div>
<div id="match" class="match"> </div>
<div class="fire" id="fire"></div>
<div class="light"></div>
</div>
</div>

You're showing the .fire element but it's parent .dom element remains hidden because of the display:none.
Show the .dom element as well as .fire:
$(".fire").show().closest('.dom').show();

Make the parent to display: block, and to the child as well.
function lightCandle(){
var dom = $(".dom");
if(dom.css('display') == none){
dom.css('display', 'block');
dom.find('.fire').show();
}
//Or with out condition,
dom.css('display', 'block');
dom.find('.fire').show();
}

Remove all label elements from JQuery variable

I use the following:
var transferTemplate = $('#transfersRow').html();
in order to store some html code in a variable, which results to:
<div class="form-group row">
<div class="col-lg-4">
<label for="inc[1].a">Counterparty</label>
<input type="text" class="form-control" id="inc[1].a"
name="inc[1].a" placeholder="Enter Counterparty">
</div>
</div>
Now I would like to be able to remove all labels from the html code. I tried:
$(transferTemplate).find(label).remove();
$(transferTemplate).remove('label');
$(transferTemplate).filter('label').remove();
but none works.

First, you need to select the row that you want to remove labels at each row:
Like this:
$(".row").each(function( index ) {
$(this).find("label").remove(); //find label at each row and remove.
});
I hope that helps.

I think that you are misunderstanding the result of html(). It doesn't return a Jquery DOM object. The result is just a string representation. Just remove the .html() and I'm sure you will be able to call the functions you want.
var transferTemplate = $('#transfersRow');

This returns a string representation of the HTML:
var transferTemplate = $('#transfersRow').html();
You could remove the label from this string like this:
$(transferTemplate).find('label').remove();
However, all that does it create a new jQuery object with the HTML minus the label. It won't update the transferTemplate variable.
Instead, you could assign $(transferTemplate) to a new variable.
That would allow you to remove the label and still have access to the updated HTML.
Snippet
var transferTemplate = $('#transfersRow').html(),
template = $(transferTemplate);
template.find('label').remove();
$('textarea').val(template.html());
textarea {
width: 100%;
height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="transfersRow">
<div class="form-group row">
<div class="col-lg-4">
<label for="inc[1].a">Counterparty</label>
<input type="text" class="form-control" id="inc[1].a" name="inc[1].a" placeholder="Enter Counterparty">
</div>
</div>
</div>
<hr>
<strong>Output</strong>
<textarea></textarea>

Well, I guess the correct way is: $(transferTemplate).find('label').remove();
https://api.jquery.com/remove/
Like the penultimate example...

AngularJS ng-mouseenter not working in child div

I have been using the AngularJS ng-mouseenter and mg-mouseleave and it has been almost the cause of my death. A quick explanation:
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true" ng-mouseout="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>
The CSS properties:
.avatarContainer {
max-width: 150px;
max-height: 150px;
display:inline-block;
float:left;
margin-right:5px;
position:relative;
}
.characterSum {
border: 1px;
min-height:160px;
position:relative;
}
I'm fairly certain it has something to do with my CSS properties. I followed a few instructions to automatically scale an image into a 150 x 150 size so that might explain my CSS properties for those wizards. Anyway, the reason why I think it has something to do with it is because when I add this:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">Hi</div>
And I add it under the parent class "characterSum", when I mouse over Hi, the button shows. As soon as I add this under the class "avatarContainer" the child div, it stops working. If I wrap the ENTIRE avatarContainer class with this div so:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">
HI
<div class="avatarContainer"> ......... </div>
</div>
It only shows the button when I go near hi. I added $scope.$watch on showButton to console.log('detected') whenever showButton changes and in every scenario, "detected" is never logged when I go over the img or anything EXCEPT FOR when I go over hi
Does anyone have any ideas on what crazy curse I have been put under? Or if not, I'm willing to use any other way of accomplishing this. (Basically want the button to show whenever the img is moused over). And I have already tried directly applying ng-mouseover to the img element to no avail.

You had a typo, you need to use ng-mouseleaveinstead of ng-mouseout
Markup
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true"
ng-mouseleave="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>

How to hide a div when input radio radio selected javascript angularjs

I want to hide a div when a radio button is selected.
<div class="col-md-3">
<input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
<input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
<div class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
</div>
<div class="col-md-3">
<button class="btn btn-default" ng-click="getReservationDetails('lg', packageSlot)"> Book Now </button>
</div>
In my code, if a radio button is selected, I want the div class = product-noselected-message to be hidden.
This is wht i have on my javascript at the moment
$scope.getReservationDetails = function(size, packageSlot) {
var service_option;
if($('input[name=service_option]:checked')) {
service_option = $('input[name=service_option]:checked').val();
}
if (service_option!= null) {
$rootScope.date = new Date();
console.log($rootScope.date);
$rootScope.singlePackageSlot = packageSlot;
$rootScope.locationName = $scope.cleaningServiceLocation.name;
modalInstance = $modal.open({
templateUrl: 'views/cleaning_services/register_event.html',
controller: 'CleaningServicesCancelCtrl',
size: size
});
}
else {
$('.product-noselected-message').html('Please select an option');
}
$('#service_option').on('checked', function() {
$('.product-noselected-message').addClass('hidden');
});
But it is not working wht do i do?
http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq

Just adding class="hidden" to an HTML element does nothing at all, you need to accompany it with some CSS like
.hidden
{
display: none; /* This will act like the element doesn't exist */
}
or
.hidden
{
visibility: hidden; /* The element will be 100% transparent, but still take up space */
}
depending on your exact goals.

add NG-IF on div, and check for "service_option" not null
add ng-if="!service_option" on 'product-noselected-message' div, you dont need css class to hide and show div in angularJS, make use of NG-IF or NG-SHOW or NG-HIDE
<div class="col-md-3">
<input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
<input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
<div ng-if="!service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
</div>

Just like BeingDev said, ng-if/ng-show/ng-hide is the angular way of doing..
Below is a plunker link in which you can check the output
http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq?p=preview
<div ng-hide="service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

Many ways to go here, some better depending in your full code but I'll go with what you requested, exactly.
That's a job for ng-class, which will assign a class name if a condition is evaluated as true:
<div ng-class="{'hidden' : service_option != '' && other_option }" ...
What you need to know is that the class name in single quotes above, will be assigned to the div (or any element) if the condition on the right evaluates to true. In this case, an value selected in the radios will stop service_option from being an empty string. Could be whatever you might need, ofcourse.
var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope) {
$scope.service_option = "";
})
.hidden {display:none;}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div class="col-md-3" ng-controller="mycontroller">
<input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option" />
Adhoc
<br />
<input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option" />
Weekly
<div ng-class="{'hidden' : service_option != '' }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
<p>Value Selected : {{service_option}}</p>
</div>
</body>
</html>
EDIT
According to your latest comment below, you need to assign a class after evaluating two things. So:
<div ng-class="{'hidden' : service_option != '' || other_option }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
this would do it. Here is a plunker link so that it dont gets confused with the code above:
http://plnkr.co/edit/pYpKwagYmYTxURM1aJft?p=preview

Assign dynamic controller in ng-repeat

I am new to Angularjs. I've tried a example in here.
file index.html:
<div ng-repeat="data in ctl.dataList">
<div class="col-md-6">
<textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea>
<button ng-show="ctl.showCloseBtn">X</button>
</div>
</div>
file app.js:
app.controller('FocusController', function() {
this.showCloseBtn = false;
this.dataList = [{
value: "one"
}, {
value: "two"
}];
this.mouseOverFunc = function() {
this.showCloseBtn = true;
};
this.mouseLeaveFunc = function() {
this.showCloseBtn = false;
};
});
I want to show close button when mouse overed every textarea like facebook chat in this picture. But my issues is when mouse over one of textarea then all X button was showed.
How do i assign dynamic controller to every textarea or how to do like facebook chat ?
Thanks for your help

You can do with CSS as well as AngularJS. I suggest you to do with CSS which is Simple. And Do your ng-click on the button.
This Plunker Demo is using with CSS and added ng-click there. Please check the styles and classes added.
Styles
<style>
.field:hover .btn-close {
display:block;
}
.btn-close {
display:none;
}
</style>
HTML
<div ng-repeat="data in ctl.dataList">
<div class="col-md-7 field">
<textarea></textarea>
<button ng-click="doSomething()" class="btn-close">X</button>
</div>
</div>
This Plunker Demo is with AngilarJS as explained in the other answer by New Dev.
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea></textarea>
<button ng-click="doSomething()" ng-show="data.showX">X</button>
</div>

Typically, it would be best to create a directive for this functionality and encapsulate all the logic of clicking the "x" button, but for simplicity you could also leverage the child scope created by ng-repeat, and do the following:
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea type="text"></textarea>
<button ng-show="data.showX" ng-click="ctl.close(data)">X</button>
</div>
</div>
ng-repeat="item in items" creates a child scope for each item, so you can set values on the child scope.
Here's your modified plunker
EDIT:
As suggested in the comments, if you have nothing more complex than showing or hiding the button, definitely CSS approach is the simplest way to go. Use the above example then as an illustration for how scopes work.