I have DIVs generated by ng-repeat and inside them I have inner DIVs. I would like the inner DIVs to be visible when a user click on the outer DIVs. An inner DIV must be visible only when its outer DIV is clicked. I implemented it with $scope.bot variable and it's not working as I want since when one outer DIV is clicked, all the inner DIVs of the other outer DIVs become visible (this is because they all depend on the $scope.bot variable).
I would like to also click on the outer div again and the inner DIV if it is visible then it will disappear.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog()">
{{course .name}}
<div ng-show="bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Stop</button>
<button class="btn btn-danger">Start</button>
</div>
</div>
</div>
$scope.bot = false;
$scope.tog = function(){
if(!$scope.bot ){
$scope.bot = true;
}
}
This is an option:
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click="tog($index)">
{{course .name}}
<div ng-show="bot[$index]== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.bot = [];
$scope.tog = function(index){
$scope.bot[index] = !$scope.bot[index];
}
Just place the visibility flag on the course object itself, so every course will have it's own flag:
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog(course)">
{{course .name}}
<div ng-show="course.bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.tog = function(course){
if(!course.bot ){
course.bot = true;
}
}
Try this
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click="course.bot = !course.bot">
{{course .name}}
<div ng-show="course.bot === true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Stop</button>
<button class="btn btn-danger">Start</button>
</div>
</div>
A simple way to do this is to remove everything regarding divs appearing and disappearing from controller and handle everything in the template.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-init="bot=false" ng-click="bot = !bot">
{{course .name}}
<div ng-show="bot">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
You can initialize the bot variable at each parent div level because ng-repeat creates a new scope for every element.
This issue you are having because you are using one bot variable which is associated to all divs.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog($index)">
{{course .name}}
<div ng-show="course.bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.tog = function(index){
$scope.courses[index].bot = !$scope.courses[index].bot;
}
Related
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
In this HTMl code :
<div class="modal__actions">
<button class="btn btn--passive">Cancel</button>
<button class="btn btn--success">Add</button>
</div>
<div class="modal" id="delete-modal">
<h2 class="modal__title">Are you sure?</h2>
<p class="modal__content">
Are you sure you want to delete this item? This action can't be made
undone!
</p>
<div class="modal__actions">
<button class="btn btn--passive">No (Cancel)</button>
<button class="btn btn--danger">Yes</button>
</div>
</div>
I am trying to reach to :
<button class="btn btn--passive">No (Cancel)</button>
item , I know there are different ways, but I am trying to use querySelector, I tried these commands but none of them selected what I was looking for:
const r1=document.querySelector('#delete-modal .btn btn--passive')
const r2=document.querySelector('#delete-modal, .btn btn--passive')
const r3=document.querySelector('.btn btn--passive, #delete-modal ')
Isn't it possible to use class and ID at the same time on querySelector ?
You should not have any space between the classes btn and btn--passive as they are for the same element. Also, you should prefix the class symbol for all the classes:
const r1=document.querySelector('#delete-modal .btn.btn--passive');
console.log(r1);
<div class="modal__actions">
<button class="btn btn--passive">Cancel</button>
<button class="btn btn--success">Add</button>
</div>
<div class="modal" id="delete-modal">
<h2 class="modal__title">Are you sure?</h2>
<p class="modal__content">
Are you sure you want to delete this item? This action can't be made
undone!
</p>
<div class="modal__actions">
<button class="btn btn--passive">No (Cancel)</button>
<button class="btn btn--danger">Yes</button>
</div>
</div>
Is there any way to access *ngFor variable item outside the current div. in my case the booking(item) method not able to access item variable. any possible way?
<div class="cart-item" *ngFor="let item of items">
<small>
<img [src]="item.imagePath" alt="{{item.name}}"
class="img-responsive" style="max-height: 100px" width="120px">
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
</div>
<button class="btn btn-primary btn-lg" (click)="booking(item)"
style="margin-right: 30px;">Book Now</button>
No, you need to put it inside the div. If you want to preserve your structure, then you should wrap your code in another div and have that use the ngFor directive instead.
The way ngFor works, is it will create an element (in your case, the <div class="cart-item"> multiple times, once for each item in the loop. The button will be placed after all the cart item elements, so how could it know which item it should refer to?
I think what you're trying to do is to put one button for each of your cart items. in this case, you would modify your code as following:
<div class="cart-item" *ngFor="let item of items">
<small>
<img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 100px" width="120px"/>
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
<button class="btn btn-primary btn-lg" (click)="booking(item)" style="margin-right: 30px;">Book Now</button>
</div>
or, if you'd like to preserve your structure:
<div *ngFor="let item of items">
<div class="cart-item">
<small>
<img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 100px" width="120px"/>
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
</div>
<button class="btn btn-primary btn-lg" (click)="booking(item)" style="margin-right: 30px;">Book Now</button>
</div>
Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>
Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());
Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>
You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest
Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});