Appending rows to nested rows issue? - javascript

I'm making a table with nested row's.
The thing is that when I append a child row to a parent row all other parent rows append a child row also.
Use function:
$scope.templates=[{src:'template'}];
$scope.include = function(templateURI) {
$scope.templates.push({src:templateURI});
}
Append row:
<button class="btn btn-default btn-sm ng-scope" ng-click="include('rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show template:
<div ng-repeat="template in templates">
<div ng-include="template.src">My template will be visible here</div>
</div>
Can somebody give me a hint?
I tried to do it myself but I didn't find what I need.

Try this: http://plnkr.co/edit/ZzPF7UFjKyp2tqn27cf4?p=preview
All of the projects are sharing the templates collection. Solve this by giving each project its own templates array and iterating through that.
Make the include function into:
$scope.include = function(project, templateURI) {
if (!project.templates)
project.templates = [];
project.templates.push({src:templateURI});
}
Call it like this:
<button class="btn btn-default btn-sm ng-scope" ng-click="include(project, 'rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show it like this:
<div ng-repeat="template in project.templates">
<div ng-include="template.src">My template will be visible here</div>
</div>

Related

sorting bootstrap modal-body elements in Javascript/Jquery when the page loads

I am working on the fiddle in which I want to sort multiple rows (Row1 having def and Assign a Computer Section, Row2 having abc and Assign a Computer Section, etc) coming from Bootstrap Modal.
At this moment, the rows are not sorted in the modal. The HTML/Bootstrap code which I have used in order to create the modal is :
<div class="row-computerlabel form-group clearfix">
<div class="editcomputerlabel col-sm-5">abc</div>
<div class="assigncomputerlabel col-sm-5">
<div class="btn-group bootstrap-select show-tick computerlabelscomputerselector">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Assign a computer"><span class="filter-option pull-left">Assign a computer</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu"></ul>
</div>
<select class="computerlabelscomputerselector selectpicker" multiple="" title="Assign a computer" tabindex="-98"></select>
</div>
</div>
<div class="deletecomputerlabel col-sm-2"><button class="btn btn-link btn-delete" data-task="deletelabel" title="Delete group" type="button"><i class="fa fa-trash-o"></i></button></div>
</div>
Problem Statement:
I am wondering what plain Javascript or Jquery code I need to add above so that all the contents in the Bootstrap Modal get sorted meaning abc, def, jkl text should show up first with their assigned computers in the fiddle when the page loads.
You could use the sort function of JavaScript.
jQuery
$(document).ready(function(){
var rowComputer = $('.row-computerlabel');
rowComputer.sort(function(a,b){
var label1 = $(a).children('.editcomputerlabel').text();
var label2 = $(b).children('.editcomputerlabel').text();
return label1 >= label2;
});
rowComputer.appendTo('#computerlabeltable');
});
This piece of code is really simple. You have in the rowComputer variable all your rows.
You apply the sort function on your array and you need to specify the condition of your sorting (here it needs to be sorted alphabetically).
Finally, you append your array containing your rows in the div englobing all yours rows.
jsFiddle
Here is a jFiddle link : http://jsfiddle.net/Lqam4g2u/

How to show/hide particular button inside dynamic divs from another dynamic list/div having ng-repeat using angularjs?

Here is the image, I am not able to toggle "Remove from cart" to "Add to Cart" by clicking REMOVE button in cart division
I have a main div which displays products in a list and we can add product to cart (another div) from there. Button on each item changes to remove from cart after that product is added.
Another div shows the Cart which can control quantity on particular item or remove the item. What I want is when an Item from Cart is removed it should get reflected in main product list (button).
Here is code for main div :
<div ng-repeat=x in bikes.items>
<div class="col-sm-3 bike-price">
<h3>Rate: ₹ {{x.rate}}/hr </h3>
<h5>Total Available : {{x.available}}</h5>
<button type="button" ng-hide="x.hide_unhide_AddButton" class="btn btn-success" ng-click="addvalue(x.bike_name,x.rate,x.available,x.location[0]);hideAddButton(x)">Add to Cart</button>
<a class="btn" ng-show="x.hide_unhide_AddButton" ng-click="showAddButton(x);callCartDelete(x.bike_name)" style="color:red">Remove from Cart</a>
</div>
</div>
Js
$scope.hideAddButton=function(i) {
i.hide_unhide_AddButton=true;
console.log("i="+i);
}
$scope.showAddButton=function(i){
console.log("i="+i);
i.hide_unhide_AddButton=false;
}
Cart Div
<div class="cart-item" ng-repeat="value in storeArray track by $index">
<span>
<button type="button" ng-click="FunctionToToggleMainDivButton()" class="btn btn-danger remove" >REMOVE</button>
<h4>{{value.bike}}
<small>Bikes Left :{{value.available-1}}
</small></h4>
</span>
<div class="add-more">
<button type="button" ng-click="IncrementUpdateElement(value.bike)" class="btn btn-success plus-minus">+</button>
{{value.bike_counter}}
<button type="button" ng-click="DecrementUpdateElement(value.bike)" class="btn btn-success plus-minus">-</button>
<div style="float:right;" >₹ {{value.cost * Total_hours}} </div>
</div>
</div>
Currently main div add to cart and remove from cart button are working properly inside ng-repeat. But I want them to toggle when I call them from Cart Div. Any help is appreciated.
EDITS:
I got the solution,
following is the plunkr, where I hide show buttons inside ng-repeat from another div having ng-repeat.
https://plnkr.co/edit/ReyvGoHMJM3SMbBMce3x?p=info

How to override an external html template angular.js

I'm using this https://github.com/amitava82/angular-multiselect multiselect dropdown for my project.
In my html:
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
This dropdown has a "checkall" and "uncheckall" button in the dropdown, which I WANT to remove, while keeping the functionality of the multi-select.
This is the html in the directive the guy uses:
src/multiselect.tmpl.html
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
{{header}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<input class="form-control input-sm" type="text" ng-model="searchText.label" ng-keydown="keydown($event)" autofocus="autofocus" placeholder="Filter" />
</li>
<li ng-show="multiple" role="presentation" class="">
<button class="btn btn-link btn-xs" ng-click="checkAll()" type="button"><i class="glyphicon glyphicon-ok"></i> Check all</button>
<button class="btn btn-link btn-xs" ng-click="uncheckAll()" type="button"><i class="glyphicon glyphicon-remove"></i> Uncheck all</button>
</li>
<li ng-repeat="i in items | filter:searchText" ng-class="{'selected': $index === selectedIndex}">
<a ng-click="select(i); focus()">
<i class='glyphicon' ng-class="{'glyphicon-ok': i.checked, 'empty': !i.checked}"></i> {{i.label}}</a>
</li>
</ul>
</div>
I wan't to just remove/override the checkall and uncheckall buttons WITHOUT editing this library's directive. I can override the CSS in my personal file.css, but how do I override the HTML template he uses. Thanks
I see 3 ways you could do it:
Add your own template to replace this one like this (reference):
<script type="text/ng-template" id="multiselect.tmpl.html">
html template without buttons here
</script>
The potential issue with this is that you would be overriding this template everywhere it's used. But maybe you are using this in a bunch of places and that makes sense.
Add a decorator to the directive that removes the part of the template you don't want during the compile phase and allows the rest of the directive to perform as usual:
decorator('amMultiselectPopupDirective' ['$delegate', function($delegate) {
var directive = $delegate[0];
var compile = directive.compile;
directive.compile = function(tElement, tAttrs) {
var link = compile.apply(this, arguments);
if (tAttrs.disableCheckAll) {
tElement.find('li[ng-show="multiple"]').remove();
// this code could be different, but the gist is that it would remove or hide the stuff you don't want
}
return function() {
link.apply(this, arguments);
};
};
return $delegate;
}]);
The potential issue here is that you would be changing the template for this directive everywhere the directive is used. That's why in my example I made the template change conditional based on some attribute you could define, like disableCheckAll.
Use template-url attribute that is already defined for this directive and create your own template that doesn't have these buttons:
<script type="text/ng-template" id="yourowntemplate.html">
html template without buttons here
</script>
<am-multiselect ...
template-url="yourowntemplate.html">
</am-multiselect>
I would say 3 is probably the best way to do it. But 1 could work better if you wanted to override the default, and then you wouldn't have to pass in the template-url everytime you use the am-multiselect directive.
Edit: Here is a working example for 3: http://plnkr.co/edit/m0lZSHUJ8MHslqCNPnCc?p=info
Overlap his directive with your own div with class: "no-btns"
Add this css:
.no-btns .dropdown-menu li:nth-child(2) {display:none;}
Example:
<style>
.no-btns .dropdown-menu li:nth-child(2) {
display:none;
}
</style>
<div class="no-btns">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
</div>

Changes in html template do not reflect

I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.
ViewerDirectve.js:
module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
return {
restrict: 'A',
replace: true,
scope: true,
templateUrl: '../../catalog/components/viewer/' +
'partials/mainviewer.html',
[...]
}]);
In this template I can find the buttons that are shown in the MapView.
mainviewer.html:
<div class="wrapper" data-ng-controller="gnViewerController">
<div data-gn-alert-manager=""></div>
<div id="map" ngeo-map="map" class="map"></div>
<div gn-gfi="" map="map"></div>
<div gn-localisation-input map="map"></div>
<!--Top right buttons - Tools-->
<div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
<button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
rel="#addLayers" gi-btn gnv-tools-btn>
<span class="fa fa-plus"></span>
<span role="tooltip" data-translate="">addLayers</span>
</button>
<button class="btn btn-default" ng-model="activeTools.layers" type="submit"
rel="#layers" gi-btn gnv-tools-btn>
<span class="fa fa-tasks"></span>
<span role="tooltip" data-translate="">Layers</span>
</button>
[...]
</div>
</div>
So I've added a button let's say:
<button class="btn btn-default" ng-model="" type="submit"
rel="#" gi-btn gnv-tools-btn>
<span class="fa fa-beer"></span>
<span role="tooltip">NewButton</span>
</button>
to the template.
Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page.
Even restarting the server won't change anything.
Could somebody explain me why AngularJS reacts like this? Any Ideas?
Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map
to force to load all AngularJS files seperately and without cache.

Reset jQuery DOM element

I have the a method and the following code to get an array id divs
arr = $('.card.recipe-slider');
which returns me (for the first time)
[<div class=​"card recipe-slider active" data-id=​"1">​…​</div>​,
<div class=​"card recipe-slider" data-id=​"2">​…​</div>​,
<div class=​"card recipe-slider" data-id=​"3">​…​</div>​]
But when I call the same method again, ( for the second time), my Jquery DOM array gets duplicated as follows
[<div class=​"card recipe-slider active" data-id=​"1">​…​</div>​,
<div class=​"card recipe-slider" data-id=​"2">​…​</div>​,
<div class=​"card recipe-slider" data-id=​"3">​…​</div>​
<div class=​"card recipe-slider" data-id=​"1">​…​</div>​,
<div class=​"card recipe-slider" data-id=​"2">​…​</div>​,
<div class=​"card recipe-slider" data-id=​"3">​…​</div>​
]
So my question is how can I avoid this duplication?
I tried followings
1 ) make the array blank
arr = []
... code
2 ) Get the unique
$.unique($('.card.recipe-slider'))
3 ) Clearing the array first
$('.card.recipe-slider').empty();
arr = $('.card.recipe-slider')
4 ) and I have seen some solutions with cloning and replacing , which I'm not quite clear and don't know if that's the way to go.
Edit
Complete code , almost... :), this works as a wizard where each div will display when user clicks next
#html
<div class='card recipe-slider active' data-id='1'>
.. html
<a class="btn btn-warning button-full button-large icon-left next">Next..</a>
</div>
<div class='card recipe-slider' data-id='2'>
.. html
<a class="btn btn-warning button-full button-large icon-left next">Next..</a>
</div>
<div class='card recipe-slider' data-id='3'>
.. html
<a class="btn btn-warning button-full button-large icon-left next">Next..</a>
</div>
JS code
$(document).on('click', 'a.next', function(e){
arr = [];
arr = $('.card.recipe-slider');
current_card = $(this).closest('.card')[0];
id = current_card.dataset.id;
$(arr[id]).addClass('active');
$(current_card).removeClass('active');
})

Categories