Here is the code :
(function($) {
var allPanels = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
http://jsfiddle.net/chriscoyier/VPfJ5/3/
How do I make the accordion collapse the panel when clicked again?
This is the answer:
(function($) {
var allPanels = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function() {
allPanels.slideUp();
if($(this).parent().next().is(':hidden'))
{
$(this).parent().next().slideDown();
}
return false;
});
})(jQuery);
A much simpler and bulletproof approach: LIVE DEMO
var allPanels = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function( e ) {
e.preventDefault(); // don't use return false;
allPanels.stop().slideUp();
$(this).parent().next('dd').stop().slideToggle();
});
The trick is to
slideUp all panels
but use slideToggle on the current one
bulletproof thanks to the proper use of .stop()
P.S: Don't misuse return false, use the proper event.preventDefault instead.
Related
if (url.indexOf('master/confirm-account') > 0) {
$scope.accountInfo = 'Confirm Account';
$scope.page = 'confirm_account';
$scope.activeTab = true;
} else if (url.indexOf('master/master-profile') > 0) {
$scope.accountInfo = 'Confirm Account';
$scope.page = 'master_profile';
$scope.activeTab = true;
} else {
$scope.accountInfo = 'Create Account';
}
<div ng-class = "{'process-step' : true, '({{page}}=='confirm_account') ? 'active-tab' : ' '}" >
How can I add process-step and active-tab class
Expected result if condition match then it become like that
The ng-class works like
{'add_this_class' : (if_this_expression_is_true)}
and not in the other way.
try this
<div class="process-step" ng-class="{'active-tab' : (page =='confirm_account') }">
Seeing to the complexity of your class matching logic you could go for second way of implementing ng-class
** Inside HTML**
<div class="process-step" ng-class="ctrl.getPageBasedClass()">
Inside Controller
var self.getPageBasedClass = function(){
var yourClassNameAsString = // your logic for class name
return yourClassNameAsString;
}
I have a smimple ng-repeat that displays user details. I am trying to set all the rows to be selected.
Currently I can manually click and select all the rows individually using following code:
<tr ng-repeat="room in classrooms" ng-class="{'selected': room.selected}" ng-click="select(room)">
in controller
$scope.select = function(item) {
item.selected ? item.selected = false : item.selected = true;
}
and to get data from the selected rows I use following logic
$scope.getAllSelectedRows = function()
{
var x = $filter("filter")($scope.classrooms,
{
selected: true
}, true);
console.log(x);
}
UPDATED FROM #KADIMA RESPONSE
$scope.toggleSelectAll = function()
{
angular.forEach($scope.classrooms, function(room) {
room.selected ? room.selected = false : room.selected = true;
})
}
Set up a new function in your controller:
$scope.selectAll = function() {
angular.forEach(classrooms, function(room) {
room.selected = true
}
}
And then you can create a button in your html to call this function.
If you want to select all data you got you can set selected property using angular.forEach() method.
https://docs.angularjs.org/api/ng/function/angular.forEach
In your case:
angular.forEach(x, fuction(value) {
value.selected = true;
}
This may be very simple but I can't seem to be able to successfully get the logic I want.
<div class="group-title" ng-class="{'group-hasError': !isValid(orderItem)}">
As you can see I'm adding a class group-hasError if the function isValid(orderItem) returns false.
Now the issue is that this is called on page load. But I don't want to call this function on page load rather when a submit button is called
<button id="add_modified_item" ng-click="isValid(orderItem)" class="btn btn-primary btn-fixed-medium pull-right">
How can I achieve this?
This is the function;
$scope.isValid = function(orderItem) {
var count = 0;
//By default make it true
var IsAllSelected = true;
angular.forEach(orderItem.menu_modifier_groups, function(group) {
var count = 0;
angular.forEach(group.menu_modifier_items, function(item) {
count += item.selected ? 1 : 0;
});
if (count == group.max_selection_points) {
IsAllSelected = true;
} else {
//if one item failed All select do return false
IsAllSelected = false;
}
});
return IsAllSelected;
}
Any advice appreciated
Defalut set
$scope.setValidClass=false;
View
<div class="group-title" ng-class="(setValidClass)? 'group-hasError':'')}">
set model with
//if IsAllSelected=false then set IsAllSelected to true
$scope.setValidClass=!IsAllSelected;
return IsAllSelected;
I would like to wrap text with span tag and save the position.
I know how to do it with JS but i dont know how to do it with angularjs
Here is what i have done:
http://jsfiddle.net/ymeaL06j/1/
This function gives me the position of the text in the DIV
function getSelectionPosition() {
var range = window.getSelection().getRangeAt(0);
var preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(document.getElementById("code"));
preSelectionRange.setEnd(range.startContainer, range.startOffset);
var start = preSelectionRange.toString().length;
return {
start: start,
end: start + range.toString().length
}
};
I take the start and end positions and insert them as an attribute in the span tag
After this i would like to save all the marked positions and load it later, i have a function that select text and then i can wrap it (i hope that there is a better solution)
function setSelection(savedSel) {
var charIndex = 0, range = document.createRange();
range.setStart(document.getElementById("code"), 0);
range.collapse(true);
var nodeStack = [containerEl], node, foundStart = false, stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
range.setStart(node, savedSel.start - charIndex);
foundStart = true;
}
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
range.setEnd(node, savedSel.end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
You can use the same code that you illustrated above and put it inside of your angularjs controller.
Refer to my plunker code; it is a simple angularjs version of your jsfiddle code.
For example, suppose that a snippet of the index.html looks like this:
<body ng-controller="MainCtrl">
<div id="code">This is <b>some text</b> bla bla bla</div>
<br />
<input type="button" value="Mark!" ng-click="markText()" />
<input type="button" value="Remove marks!" ng-click="removeMarks()" />
</body>
Then the example angularjs controller, MainCtrl, could look like this:
app.controller('MainCtrl', function($scope) {
var getSelectionPosition = function () {
var range = window.getSelection().getRangeAt(0);
var preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(document.getElementById("code"));
preSelectionRange.setEnd(range.startContainer, range.startOffset);
var start = preSelectionRange.toString().length;
return {
start: start,
end: start + range.toString().length
}
}
$scope.markText = function() {
var currPosition = getSelectionPosition();
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
span.className = "Mark";
span.setAttribute("PosStart", currPosition.start);
span.setAttribute("PosEnd", currPosition.end);
span.appendChild(selectedText);
selection.insertNode(span);
};
$scope.removeMarks = function() {
$(".Mark").each(function () {
$(this).contents().unwrap();
});
};
});
Notice that the MainCtrl is the angularjs controller for the body. The ng-click on the buttons reference the markText and removeMarks functions in the controller's scope. The logic in the functions are exactly the same as you referenced in your question (and jsfiddle).
None of your JS code changed other than moving the functions inside of the controller. Again, check out the plunker above to see the actual code working.
I have an app that allows paginating through a large text dataset via the keyboard's right/left arrow keys. The data that is displayed, also contains images.
I would like to delay the loading of these images for 1-2 seconds while the user is paginating through the data quickly.
As soon as the user stops at a certain page, all images should be "lazily" loaded.
I tried to adapt this fiddle to my app without success (see below). http://jsfiddle.net/boneskull/UfrhH/3/
my controller code
$scope.delay_images = function() {
$timeout(function() {
return true;
}, 2000);
};
view code
<tbody>
<tr>
<td style='text-align:left;padding-right:40px; height:250px;width:{{100 / panel.size}}%' ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size">
<h4>{{event._source.Price}} {{event._source.Currency}}</h4>
<img ng-show="delay_images" ng-animate="{show: 'show'}" style='height:100px' ng-src="/img/{{event._source.image_paths}}"/><br /><h6>{{event._source.Title}}</h6>
<button ng-click="build_search(event._source)" ng-show='event._source.ClusterID' type="button" class="btn btn-primary">More like this</button>
</td>
</tr>
</tbody>
I am fairly new to angular.js so any tips that can guide me into the right direction are greatly appreciated.
Thanks!
UPDATE
This is a partially working code based on the accepted answer. BTW, it also implements a delay for the keydownevent.
Right now the code uses ng-show to hide and show images. I realized that this approach is problematic because it triggers a lot of image resource requests in the background while the user is paging.
So the best would be to combine the current solution somehow with the second solution replacing the src= attribute.
How would I go about that? I am catching the keydownevent from a surrounding div, so I have no direct handle to the images. Is there a way to access a class of elements with angular js? Just like with a jquery selector?
var lastFire = 0;
$scope.changeIndex = function($event) {
if($event.keyCode == 37 || $event.keyCode == 39){
var cFire = new Date();
// cancel old timeout
if ($scope.panel.timeoutId) {
$timeout.cancel($scope.panel.timeoutId);
}
// $event.keyCode...
if ((cFire - lastFire) / 1000 > 0.3){
// hide images to start with
$scope.panel.imagesVisible = false;
if ($event.keyCode == 37 && $scope.panel.offset > 0){
$scope.panel.offset = $scope.panel.offset - 10;
//$scope.get_data();
lastFire = cFire;
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 1000);
}
if ($event.keyCode == 39 && $scope.panel.offset < $scope.data.length - 10){
$scope.panel.offset = $scope.panel.offset + 10;
//$scope.get_data();
lastFire = cFire;
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 1000);
}
}
else{
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 1000);
}
}
};
I'd make a custom directive. This is off the top of my head, untested, but something like this should work:
myApp.directive('ngSlowSrc', function($timeout){
return{
restrict: 'A',
link: function(scope, element, attrs){
$timeout(function() {
element.src = attrs.ngSlowSrc;
}, 2000);
}
}
});
now just make your image calls like this: <img ng-slow-src="myimage.jpg" >
The way this works is it just waits 2 seconds to set the src of your image.
I think the simplest thing would be to handle it when you are paging. Let's say this is the function you call to page:
$scope.changeOffset = function(offset) {
$scope.panel.offset = offset;
// cancel old timeout
if ($scope.panel.timeoutId) {
$timeout.cancel($scope.panel.timeoutId);
}
// hide images to start with
$scope.panel.imagesVisible = false;
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 2000);
});
Then all images on the page can use the flag:
<img ng-show="panel.imagesVisible" ...
Working solution...
used the element method from angular which wraps jquery.
Also included the apply method in between the timeouts to make the ui experience smoother.
Thanks for your input guys.
var lastFire = 0;
$scope.changeIndex = function($event) {
if($event.keyCode == 37 || $event.keyCode == 39){
var cFire = new Date();
// cancel old timeout
if ($scope.panel.timeoutId) {
$timeout.cancel($scope.panel.timeoutId);
}
// $event.keyCode...
if ((cFire - lastFire) / 1000 > 0.5){
if ($event.keyCode == 37 && $scope.panel.offset > 0){
$scope.panel.offset = $scope.panel.offset - 10;
//$scope.get_data();
lastFire = cFire;
$scope.panel.timeoutId = $timeout(function() {
$scope.$apply(function () {
angular.forEach(angular.element('.productImage'), function(value, key){
var elem = angular.element(value);
elem.attr('src',elem.attr('ng-slow-src'));
});
$scope.panel.timeoutId = undefined;
});
}, 1000);
}
if ($event.keyCode == 39 && $scope.panel.offset < $scope.data.length - 10){
$scope.panel.offset = $scope.panel.offset + 10;
//$scope.get_data();
lastFire = cFire;
$scope.panel.timeoutId = $timeout(function() {
$scope.$apply(function () {
angular.forEach(angular.element('.productImage'), function(value, key){
var elem = angular.element(value);
elem.attr('src',elem.attr('ng-slow-src'));
});
$scope.panel.timeoutId = undefined;
});
}, 1000);
}
}
else{
$scope.panel.timeoutId = $timeout(function() {
$scope.$apply(function () {
angular.forEach(angular.element('.productImage'), function(value, key){
var elem = angular.element(value);
elem.attr('src',elem.attr('ng-slow-src'));
});
$scope.panel.timeoutId = undefined;
});
}, 1000);
}
}
};