I am trying to get Isotope 2.2.2 and Angular Isotope to work together. I have the grid working, and filtering works perfectly. My problem arises with Sorting.
I constructed json data similar to the one in his example, each item having a date and a name, and am using an angular ng-repeat to create the isotope items. As I said, this is all working, and filtering with buttons works like a charm.
According to the instructions, adding sorting works by adding a second button group like so:
<h4>Selector and Value-Based Sort</h4>
<div class="btn-group" opt-kind="" ok-key="sortBy">
<button type="button" class="btn btn-default" ok-sel=".name">Name</button>
<button type="button" class="btn btn-default" ok-sel="[date]" ok-type="integer">Date</button>
</div>
I did this, and tried many ways, but every time I add the ok-sel attribute, the whole thing takes a dive and I get an angular error in the console:
TypeError: $elem.find is not a function
I have tried removing and adding things, and even with one button, there are no errors (but of course the button does nothing) without the ok-sel attribute in the sort buttons.
Any suggestions?
Related
I am doing a learn Javascript for beginners course on Scrimba.
We have to create a button. Two different implementations, one using <button type> and the other using <button id> are giving different results.
I am unable to understand what the difference is between type and id. Please help?
Implementation 1 by the tutorial-
<button id="increment-btn">INCREMENT</button>
This gives a red button 1
Implementation 2 by me-
<button type="increment-btn">INCREMENT</button>
This gives a grey button 2
What's the difference between the way they work?
Thanks!
I am trying to search for a specific object inside a html website that the only difference is a disabled="". I have attempted to several attempts but none have been successful.
Problem:
There is two buttons displayed one that is active and the other one is disabled. My goals is to try to find the xpath only for the one that is enabled. I have attached the HTML for both buttons below.
HTML:
<button _ngcontent-skh-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327109">submit </button>
<button _ngcontent-ylw-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327008" disabled="">submit </button>
Xpath:
//*[(contains(#id, 'price-submit-')and not(contains(#disabled," ")))]
This XPATH returns a finding of two elements when I am expecting only one.
Any help would be appreciated.
The problem is your xpath isn't expressing what you really want. You're asking for elements that do not have a disabled attribute whose value contains a single space. Both do not, so both are selected.
It seems like what you really want is the element that has no disabled attribute whatsoever. Try this:
//*[(contains(#id, 'price-submit-')and not(#disabled))]
or
//button[(contains(#id, 'price-submit-')and not(#disabled))]
I am totally fresher in JavaScript and jQuery can anyone help me or suggest regarding this task how can I do this.
I have a task, I want want get dynamic id of input field on button click, I have 100 dynamic input field
<input id="ProgressBar_1" type="text" name="dProgressBar_1" class="form-control bulk-pricing-streetProgressBar">
<input id="ProgressBar_2" type="text" name="dProgressBar_2" class="form-control bulk-pricing-streetProgressBar">
these are my id's, I want to get these id's on button click there code I have mention below.
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id=" "></button>
Finally I want store these getting id's in another button.
<button id="" class="btn btn-danger handleIncorrectNoBtn" type="button">Remove House</button>
Finally I Want to perform some task on this button.
Ill give you a couple of hints, though i find it very hard to fully understand what you are trying to achieve here. Maybe rewrite your question, provide some specifics and be more clear if possible.
[From what i understand]
your first part is a button that when clicked will retrieve the ids of input fields?
lets say this is your button:
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id="myButton"></button>
the click code would look similar to (i'm kind of pseudo coding this af you have provided no example or demo i can use to test, my apologies if this is not correct):
function {
var ids = [];
$('#myButton').on('click', function() {
ids = [];
$("input .classOnAllInputIdsYouWantToGet").each(function(e){
ids.push(e.attr("id"));
});
// store in a variable here or continue using the ids variable
// created above - this can be used anywhere within this function
});
function myOtherFunctionINeedIds(){
// Use ids here
}
}
im not sure if this is what you are after, if not please update or amend your question and i will change my answer to try get exactly what you are after.
good luck.
I'm using this angular treeview project:
https://github.com/nickperkinslondon/angular-bootstrap-nav-tree
I think that this treeview haven't got functions to do searches over treeview, so I implemented mine using a form to write the label to find.
<form name="searchForm" novalidate style="margin-bottom: 50px">
<div> <input ng-model="search" type="text" class="form-control" placeholder="Buscar..." name="searchTerm" required />
</div>
</form>
This form has a .watch to detect when the user writes some text:
$scope.$watch('search', function(newTerm, oldTerm) {
filteredResponse = !newTerm ? response : updateFilteredResponse(normalize(newTerm));
updateTree();
}, true);
The function 'updateFilteredResponse' filter the nodes with label containing newTerm over original data set (read from json) and returns an array with the items to show in treeview.
The 'updateTree' function use this array and transform my custom items in the array to treeview items to add to the treeview. This items are added to
$scope.tree_data = [];
And this array is the one that uses abn-tree directive:
<abn-tree tree-data="tree_data" tree-control="my_tree" ng-if="loaded" expand-level = "2"></abn-tree>
This part is working fine. My problem comes when the result treeview is shown at screen, the treeview always appears completely collapsed.
If I put a button similar to the library example code like this:
<div style="vertical-align:top">
<button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
</div>
And declaring this in the controller as the example:
var tree;
$scope.my_tree = tree = {};
When the users click the button to expand all over the search results, it works fine. By I need to auto-expand the treeview after a search, and remove the expand-all-button.
For that, I'm trying to call my_tree.expand_all() in my controller. I tried different calls:
$scope.my_tree.expand_all();
tree.expand_all();
In different parts of my controller and my html (using ngIf and onload directives). Even I tried to do a 'watch' over $scope.my_tree for try to use the expand_all() function when var is prepared but I always have the same error:
$scope.my_tree.expand_all is not a function
Can anyone help me with that please?
You can put expand_all() function into setTimeout function as below.
setTimeout(function() {
$scope.my_tree.expand_all();
$scope.$digest();
}, 0);
It have to do because it take some delay time while binding data to treeview.
is there a way to apply a specific template only to the last ui-grid 's row?
I triyed doing that using <div ng-show="grid.renderContainers.body.visibleRowCache.indexOf(row)==gridOptions.data.length-1"> but it seems not to be working :(
Am I missing something?
if I just replace gridOptions.data.length-1 by a number it works correctly
here is a plunker
cellTemplate:'<div ng-show="row.rowIndex==$scope.gridApi.grid.options.totalItems"><button class="btn primary" ng-click="grid.appScope.showMe()">Click Me</button></div>' }