I want to place a checkbox next to the expandable summary of a details element which is inside a ng-repeat.
It all looks fine initially, but when I click on the expand arrow, the checkbox gets places inside the summary instead of next to the arrow. The checkbox must be inside the ng-repeat because I need the $index in my checkbox ng-click function:
<div ng-repeat="n in ctrl.array track by $index">
<input type="checkbox" style="display: inline-block"
ng-model="ctrl.checked[$index]" ng-click="ctrl.setSelected($index)">
<details style="display: inline-block">
<summary>Display something (element {{$index + 1}})</summary>
<iframe></iframe>
</details>
</div>
I found a solution. I just have to use
style="float: left"
for the input element. That's it. No further styling of the details element needed.
Related
So I have the below work-flow:
I've got a list of items each having an ng-click event which opens an iframe below the item clicked. Now,
On clicking an item of the list, a div tag below that item displays (initially hidden) which contains an iframe.
Now on clicking another item from the same list, another div tag displays below the recent item clicked, which in turn displays the iframe for the recently clicked item.
The issue that I'm facing is this -
On clicking an item of the list, if any div tag containing the iframe is currently open, it gets closed and the div tag along with the iframe of the recently clicked item displays.
Currently, if any iframe is open, on clicking an other item from the list, a new iframe of the recently clicked item opens along with the initial iframe still remaining open. The initial one getting closed only after I've clicked on it.
What shall I do?
PS: I hope the scenario is clear, let me know if further clarification is required.
Edit-
Posting a jsfiddle link is kinda tough as this question is a part of a huge folder I'm working on. But, I'll post the code here and hope that it will suffice.
HTML:
<div ng-repeat="data in JsonData">
<div class="row" ng-click="getGraph(data.id, $index)">
<div class="col-lg-6 text-left">
<span id="title">Title: {{data.name}}</span><br><br>
<span style="color: #000 !important">
<strong>Id:</strong> {{data.id}}
</span><br/><br>
</div>
<div class="col-lg-4 text-left" style="color: #000 !important;">
<span style="text-align: left; font-size: 13px;">
<strong>Details:</strong> {{data.details}}
</span><br/>
</div>
<div class="iframe col-lg-10 col-lg-offset-2">
<div class="ibox float-e-margins ibox_shadow">
<iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}">
</iframe>
</div>
</div>
</div>
</div>
And the controller.js code:
$scope.getGraph = function(d,i) {
$scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d;
var elem = document.getElementsByClassName(d);
$(elem).toggleClass('class_to_toggle_hide_show');
}
If you post the code it will clear it more. But in the ng-click event you can first say ng-click="youfunction($event)"
and
$scope.yourfunction = function(event){
$(even.target).find("iframe").remove();
//and then your other stuff here
}
I have a dropdown menu scrollable with options. I also have on top of that a search-box (example "CAR"). Now the search-box makes part of the scrollable menu, so when you scroll down the search box goes away. I need the search box to stay fixed on top of the scrollable menu. So basically I have to move the search box "out" of the scrollable-menu section. The problem is in my javascript code (my html is fine, thats for sure) but I cannot find it, is it possible to achieve my goal?
My BOOTPLY... [BOOTPLY][1]
Simply change your HTML like this:
<div class="dropdown-menu brand">
<div style="position: relative;">
<input class="Car" placeholder="Car" type="text">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
I moved <input class="Car" placeholder="Car" type="text"> above your scrollable-menu div, it was your HTML after all.
You should also change the variable targetinput like this:
var targetinput = currentgroup.find('.Car > input[type="text"]');
It should select your textbox propperly now, this is because you tried to find a textbox within the class scrolllable menu, however we moved the textbox outside of it.
I am new with angularjs and struggling to make some logic for Showing and hiding different Div's using ng-show and ng-hide based on different click.
PLUNKER
View 1:
<div ng-hide="section1">
<select>
<option>Select List 1</option>
<option>Select List 2</option>
</select>
</div>
<div ng-hide="section1">
<ul>
<li ng-repeat="name in names">{{name.item}}</li>
</ul>
<button type="button" ng-click="section1=!section1">Edit</button>
</div>
Initially it shows a Dropdown, some list Item and Edit button
Clicking on Edit button Everything hides and shows View 2
View 2:
<div ng-show="section1">
<button type="button" ng-click="section2=!section2">+ Create New Item</button>
</div>
<div ng-show="section1">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name.item">
</li>
</ul>
<button type="button" ng-click="section1=!section1">Save</button>
</div>
On view 2 There is a button "Create New item" , List of Input fields with same value of view 1's list items and a save button.
This view 2 is basically edit mode of view 1.
Upto now works fine.
Problem: If I click "+Create new item", "View 2" Should Hide and "View 3" should Open.
View 3 Contains some blank input list and "Save button".Clicking on "save button" Hide "View 3" and again open "View 1".
View 3
<div ng-show="section2">
<ul>
<li ng-repeat="name in names">
<input type="text">
</li>
</ul>
<button type="button" ng-click="section2=!section2">Save New List</button>
</div>
I am struggling to manage 3 different view based on different button click with ng-show and Hide. It's not showing and hiding properly from clicking "+create new button".
Is this possible to make it work perfectly with ng-show & ng-hide only ?
Is there any better way to handle ?
Any help will be appreciated.
A better way to handle what you're trying to do is to have a variable that holds the index of the current section. Then, you could use something like ng-show="currentSection === 1" which I think would be a little more straight forward.
Then your click action could look more like ng-click="currentSection = 1". That will show all elements with ng-show="currentSection === 1".
Does that help any?
I have modified your plunker to fix your issue. You need to use both variable in ng-show
ng-show="section1 && !section2"
http://plnkr.co/edit/rdKIT4leGM9U7BNoE01B?p=preview
There are better ways to achieve what you are trying to achieve.
Try ng-switch for example
https://docs.angularjs.org/api/ng/directive/ngSwitch
I'm making a content slider for my project but I have very little expirience in AngularJS.
I've found this plunker which suits my needs greatly. You can see my live page here. It is in russian language, but I hope it wont be a problem. Slider is in the middle of the page - a section with 8 cards.
So the problem is:
Slider is controlled by the arrows below it. Still if you click on the red button inside the card it will update the model and classes ng-enter and ng-leave will be applied to the parent container which will result in slider animation. Well, the problem becomes obvious if you just click these red buttons.
Is there any way to make these red buttons not apply ng-enter and ng-leave classes to the container div?
UPDATE: Here is a plunker, that illustrates my problem. The animation must happen when you click on Prev and Next buttons. But it happens when you click on "Choose" or "Choosen" links, which updates the model.
This is a markup
<body ng-controller="MainCtrl">
<div class="page-container">
<div class="gift-page" ng-class="direction" ng-repeat="page in gifts | partition: 6 | offset: currentPage | limitTo: 1">
<ul class="gift-list clearfix">
<li class="gift" ng-repeat="gift in page">
<div class="gift-item">
<div class="gift-details">
<h3>{{gift.title}}</h3>
<span class="points">{{gift.points}} points</span>
Choose
Chosen
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="controls">
<button ng-click="prev()">Prev</button>
<button ng-click="next()">Next</button>
</div>
</body>
Quick, but not the best solution is to turn off animation before action and turn on after:
$scope.addToBasket = function(gift){
$animate.enabled(false);
gift.ordered = true;
$timeout(function(){
$animate.enabled(true);
})
}
Here is plunk.
Will look for better solution later))
Can try adding $event.stopPropagation(); to the ng-click event, in your case:
Выбрать
I have a comparison table that has about 20 items. I would like when a link is clicked it will show more information on that item. I can do this by using the following function:
$(function(){
$('.show').click(function() {
$('#keywords').fadeIn('slow');
});
});
However as I mentioned there are twenty items and repeating the above code could get cumbersome.
How do I create a function that would show the div below the link that is clicked? On top of that if a div is open or visable and another item is clicked I want the other item to close or fade out and then the other to show.
Here is my HTML for part of the page:
<tr class="second">
<td class="cat" style="width: 33%;">
<div>
<a class="show" href="#"> Mobile Keywords</a>
</div>
<div id="keywords" class="hide">
p>Info Here</p>
</div>
</td>
<td style="width: 33%;">
<i class="icon-ok"></i>
</td>
<td class="" style="width: 33%;">
<i class="icon-ok"></i>
</td>
</tr>
<tr class="second">
<td class="cat" style="width: 33%;">
<div>
<a class="show" href="#">Another Category</a>
</div>
<div id="category-2" class="hide">
p>Info Here</p>
</div>
</td>
<td style="width: 33%;">
<i class="icon-ok"></i>
</td>
<td class="" style="width: 33%;">
<i class="icon-ok"></i>
</td>
</tr>
I assume this can be done using the this property but I do not know how to implement this as I am not familiar enough with JS.
To summarize: How do I have a link in this table that will be clicked and then the link shows the appropriate div without having to create a repeat the code for every item?
Try
$('.show').click(function() {
$('.hide').hide();
$(this).closest('td.cat').find('.hide').fadeIn();
});
Fiddle
edit: Added hide functionality as requested in the question.
Explanation
In the code above, this references the element that triggered the click event handler (the clicked anchor element).
Then, this is wrapped inside a jQuery object and we traverse the DOM tree up to a common ancestor using the .closest method, from there we find the hidden element to display.
The $('.hide').hide() in the first line is self-explanatory, it hides all elements with the hide class before animating the fadeIn of the one to be displayed.
$(function(){
$('.show').click(function() {
$(this).parent().next('div').fadeIn('slow');
});
});
Utilizing the .parent() method, we can traverse up the dom one level, then using .next() we get the next immediate div, which seems to follow sequence with your markup.
Using your HTML markup, this might work. Will hide currently shown div, only if its not the same element and show the desired one.
$(function(){
$('.show').click(function() {
if ( !$(this).hasClass('shown') )
{
$('.shown').removeClass('shown').parent().siblings('div').hide();
$(this).addClass('shown').parent().siblings('div').fadeIn('slow');
}
});
});
Edit: working code.
$(function(){
$('.show').click(function() {
$('.hide').hide();
$(this).parent('div').next('div').fadeIn('slow');
});
});
Uses this (as you expected), looks for its parent div, and then looks for its first sibling div.
Edited to include the hide functionality.