I wana toggle elements but not all elements i need just one on which is clicked.
for example if I have 3 form elements and 3 buttons if I click on button 1. I just wana toggle 1. form element.
This is my current code:
angular:
$scope.formWhat = false;
$scope.formShow = function(item){
$scope.formWhat = !$scope.formWhat;
};
html:
<div ng-repeat="x in comments">
replay
<form id="<%x.id%>" ng-show="formWhat">
blbllblblbl
</form>
</div>
This code will open all forms, but i need just on which is clicked, any idea?
One of the helpful things here is that ng-repeat creates a child scope for each item repeated.
So you can use a local variable inside that child scope that controller knows nothing about. This won't close any of the others but that could be accomplished also. Criteria you gave wasn't very specific
<div ng-repeat="x in comments">
<a ng-click="showForm = !showForm">replay</a>
<form ng-show="showForm"></form>
</div>
Related
So, I'm trying to use a angular way to send the buttons created to either the #start or #finish divs, based on click on the buttons selected, so in a way they would send themselves if you may if they follow a condition, which in this case is to be either inside of the #start or #finish divs. With Jquery, I just check what's the parent of certain element, if matches one, I send it to the other, and vice versa. Now with angular, I have been looking into the whole, rendering and stuff, but my head can't just understand the overall picture, and I even though I was able to click and send the element clicked to a different div, I couldn't do it with the other buttons created, and also with the button that was first clicked, in the other div.
<div class="ui raised very padded text container segment"
#finish>
</div>
<div class="ui raised very padded text container segment" #start>
<button
*ngFor='let word of ge_array'
(click)="goToNext()"
>{{word}}</button>
</div>
Does anybody know how to tackle this situation?
Renan, I would change all your plan. I have an array of element. this elements have a property "place". I will show in two div one for "plan1" and the other for "plan2".
//the .ts is like
items:any[]=[{word:'uno',place:1},{word:'dos',place:1},{word:'tres',place:2}]
get items1(){
return this.items.filter(it=>it.place==1);
}
get items2(){
return this.items.filter(it=>it.place==2);
}
//the .hmtl like
<h2>place 1</h2>
<button *ngFor="let item of items1" (click)="item.place=2">{{item.word}}</button>
<h2>place 2</h2>
<button *ngFor="let item of items2" (click)="item.place=1">{{item.word}}</button>
I would prefer using a getter and have "item1" and "item2". the click make that the property "place" of the item becomes 2 in place 1 and becomes 1 in place2
You can make two *ngFor over the same array also using a *ngIf like
<h1>place 1</h1>
<div *ngFor="let item of items">
<button *ngIf="item.place==1" (click)="item.place=2">{{item.word}}</button>
</div>
<h1>place 2</h1>
<div *ngFor="let item of items">
<button *ngIf="item.place==2" (click)="item.place=1">{{item.word}}</button>
</div>
and forget the getters
I don't want to change HTML because I want to leave the display the way it is for default view and want to move them in second view. I want to know how I can dynamically order the class of a div.
I want to do this via button click. I have adEventListener() for 'click' where I am doing something and the move logic would go inside this event listener.
I understand that I can get these divs, remove from their parents and place it where I want. But I do not know how to do these for each of them since I have multiple lis. I am struggling with the loop so that I can do these for each li. I need to do this using pure JS and not jQuery.
<ul>
<li>
<div>
<div class="a">
<div class="b">
<a class="c">
<div class="d"></div>
<div class="e">
<div class="f"></div> // this is the first item that I want to move
</div>
<div class="g"></div> // this is the second item that I want to move
</a>
</div>
<div class= "h"></div> // I want above mentioned divs to be before this div
</div>
</div>
</li>
//There are multiples lis
<li></li>
Assuming you would like to do this on load of the page, you could solve your problem with the following JQuery DOM manipulations:
$(document).ready(function(){
$("ul .a").each(function(index, element){
$current_div_a = $(element);
$div_h = $current_div_a.find(".h");
$div_f = $current_div_a.find(".f");
$div_f.clone().insertBefore($div_h);
$div_f.remove();
$div_g = $current_div_a.find(".g");
$div_g.clone().insertBefore($div_h);
$div_g.remove();
})
});
You can test it out on this demo.
I strongly advise against this way of doing it though. I guess it's also the reason why your question got some downvotes too. Just modifying your HTML keeps your code clean, maintainable and clearer for anyone else starting to work on your project. Keeping backwards compatibility for your code as much as possible will cause maintainability problems later.
I ended up using
var list = document.querySelectorAll("ul li");
for (var item of list) {
let fClass = item.querySelector(".f");
fClass.parentNode.removeChild(fClass);
let parentOfFirstChildAfterWhichIwantMyF = item.querySelector(//selector for parentOfFirstChildAfterWhichIwantMyF);
parentOfFirstChildAfterWhichIwantMyF.insertAdjacentElement("beforeend", fClass);
}
So I've been looking around for an answer for this but I just couldn't find the answer. So what I have is a ng-repeat of items that are in a particular class="list-items". When I click on each of the item in items, it should execute a function. Within each list I have an remove button which I would like to remove the item when clicked.
So some code for reference:
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index)">X</button>
</div>
So I did right now, in my CSS, i tried using an position absolute on the button and a z-index of like 10000 to show that it is greater than, but when I click the removeItem button, it still calls the executeCallback function. I don't want it to call the executeCallback function.
Is there a way to have the removeItem function be called only when the remove button is clicked and not the parent class?
You can add multiple events in one ng-click.
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>
Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Source
You can use this, directly in the HTML template, to stop its propagation by calling $event.stopPropagation(). Just add it on the button and you should be fine:
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>
I want to create dynamic ng-reapet and push the array element on click event:
my controler code is
$scope.AddlistItem = function (index) {
$scope.selecttaglist($scope.tag);
};
$scope.selecttaglist = function (tag) {
//var i=$scope.selectedTags.length;
angular.forEach($scope.selectedTags,function(tag,index){
console.log(tag.name);
$scope.selectedTagslist.push(tag);
})
And View Code:
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
Html Code
<div class="AddButtn" id="aDD{{item.name}}" ng-controller="ItemController" ng-click="AddlistItem()" ></div>
problem is that when i clicking on link. array element are pushing on all ng-reapet element.i want array will be push only on clicked element container. iam not sure my approach is write or wrong for doing this. i am new in angularjs. anyone can help on this.
If the model for ng-repeat is the same then you need different approach as model drives the view so i.e. you will need more than one
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist2" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
with a copy of the first element - angular.copy otherwise the object will be connected by reference and the effect will be same
hope that makes sense
I'm looking for a jQuery solution for this. When I click, let's say on a artist name. Theirs another div beside that has the information showing up. (possibly in a animation/fading way)
Can anyone help?
Link and Info Within Physical Proximity
Use this method if your artist link and artist info is within physical proximity (i.e., sibling in the DOM). Let's say you have:
<a ... class="artistInfo">Artist name</a>
<div class="artistInfo"> .... shown on link click </div>
... repeat
Then use:
$('div.artistInfo').hide(); // Initially hide info
$('a.artistLink').click(function() { // Show on click
$(this).next('div.artistInfo').fadeIn();
});
next() is used to avoid wrapping each link-info set in "per-artist" container. Thus, you should be able to have multiple "sets" of link-plus-info in the same page.
Link and Info in Different Places
When there is no physical proximity between the link and tha info, you will need some sort of identifiers from the link to the info*. E.g.,
<a ... class="artistLink" id="artistLink-1">Artist name</a>
...
<div class="artistInfo" id="artistInfo-1"> .... shown on link click </div>
You can now:
$('div.artistInfo').hide(); // Initially hide all infos
$('a.artistLink').click(function() { // Show on click (by reference)
var n = $(this).attr('id').substring(11); // Remove "artistLink-"
$('#artistInfo' + n).fadeIn();
});
*) Note: You could use the DOM index if links and infos are ordered similarly. I.e., the nth <a> element corresponds to the n info element.
Use the .html method of jquery
If by 'beside' you mean it is the very next sibling, you can use next:
$(".artist").click(function() {
$(this).next("div").slideToggle("slow");
});
<span class="artist">Foo and the Jackals</span>
<div>some content</div>
<span class="artist">Jeff and the misshapen lunatics</span>
<div>some content</div>
...
slideToggle will "Display or hide the matched elements with a sliding motion.".
There can be a number of ways to do this. But then it actually depends on how exactly you want it. one possible way can be use of fadeIn method on a hidden DIV.
<div class='box' style="display:none;">
<p> Artist Description </p>
</div>
<p id='abcd'>Artist Name</p>
for example on this code use this jquery
jQuery('#abcd').click(function(){
jQuery('.box').fadeIn();
});