I am using ngTable with filters.
How can I clear the filters values by clicking on one button?
I thought that $scope.tableParams.reload(); would reset the filters but apparently it's not the case.
Thank you
Like so: $scope.tableParams.filter({});
You can clear the filters supplying an empty object ({}) to the filter() method of tableParams instance.
Look below inside the ng-click directives:
If you are using controller as syntax:
In controller:
this.tableParams = new NgTableParams(tableSettings, tableParams);
In view:
<div ng-controller="demoCtrl as demo">
<button class="btn btn-primary pull-right"
ng-disabled="!demo.tableParams.hasFilter()"
ng-click="demo.tableParams.filter({})">
Clear filters
</button>
</div>
If you are using controller with $scope syntax:
In controller:
$scope.tableParams = new NgTableParams(tableSettings, tableParams);
In view:
<div ng-controller="demoCtrl">
<button class="btn btn-primary pull-right"
ng-disabled="!tableParams.hasFilter()"
ng-click="tableParams.filter({})">
Clear filters
</button>
</div>
Related
I have inherited a GUI written with Angular, and at the moment I don't even know enough to trim it down to a fiddle. So I'm hoping this is more straightforward than it appeared on a quick Google.
I have a modal dialog created using Bootstrap that is basically the same as the live demo here: http://getbootstrap.com/javascript/
A copy of the source from that link:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The main difference in my case is that the "Save Changes" button is actually a link - to a resource which is downloaded without leaving the page. It looks like this:
<a ng-href="{{downloadUrl}}" class="btn btn-primary">Download</a>
My goal is to have the above modal dialog dismissed when the link is clicked, while still downloading the file. If I use data-dismiss, the download doesn't happen.
If I need to go digging around the code, that's fine, but I'm hoping there's a simple change to the template that will do the trick. Any suggestions?
First, when using with AngularJS 1.x, always use Bootstrap UI.
When using Bootstrap UI's $uibModal, it is way easier to manipulate the modal, and pass data between the view and the modal. The reason the link does not work, is because the modal should be closed first.
You can create a simple function which replaces href or ng-href: It closes the modal first, and goes to the link second.
And, remember, please do not use jQuery, and always try to use AngularJS dependencies like $window instead of window, when they're available. This also goes for onclick. always use ng-click, and handle the logic in your controller.
In your template, add the controller, and an ng-click-attribute:
<div ng-controller="MyCtrl as $ctrl">
<a href target="_blank" class="btn btn-primary" ng-click="$ctrl.go('#/some/url')"> Go </a>
</div>
In your controller, add the logic, for closing the modal, and following the link:
app.controller('MyCtrl', function($uibModalStack, $window) {
this.go = function(path) {
$uibModalStack.dismissAll();
$window.location.href = path;
}
})
You have to close the modal yourself. Here is a bootstrap.js only solution without angular. In angular you would open the modal with angular-bootstrap and close it also that way.
<a ng-href="some-reosource-url" target="_blank" class="btn btn-primary" onClick="closeModal()">Download</a>
function closeModal() {
$('#myModal').modal('hide');
}
http://plnkr.co/edit/0sRb5VdT9isEFdJ66Rxe?p=preview
Here's a working Plunker.
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.hideAndDownload = function() {
$('#myModal').modal('hide');
var link = document.createElement("a");
link.download = "data:text/html";
link.href = "http://code.jquery.com/jquery-1.11.3.min.js";
link.click();
}
});
Markup
<button type="button" class="btn btn-primary" ng-click="hideAndDownload()">Save changes</button>
I create table using bootstrap and angular use object to display data. I want to open popup window to change object property by clicking row (and use angular binding in modal to work with object).
So my issue that i doesn't understand how to pass object from table to modal.
I found many examples with passing values and changing html on fly but in my case i want to use angular for binding and want to pass reference to object.
Sample of table:
<table class="table table-condensed table-bordered">
<thead>...</thead>
<tbody>
<tr ng-repeat="property in properties" data-toggle="modal" data-id="property" data-target="#editPropertyModal">
<td>{{property.name}}<td/>
<td>{{property.value}}<td/>
<td>...<td/>
</tr>
</tbody>
</table>
So by clicking this row i want to open modal and pass there property object and use controls like input, combobox to bind values via angular.
My sample of modal:
<div class="modal fade" id="editPropertyModal" tabindex="-1" role="dialog" aria-labelledby="editPropertyModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editPropertyModalLabel">Property details</h4>
</div>
<div class="modal-body">
{{currentProperty.name}} - {{currentProperty.value}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
My try to pass property via javascript:
$(document).on("click", ".open-editPropertyModal", function (e) {
e.preventDefault();
var _self = $(this);
var property = _self.data('id');
$("#currentProperty").val(property);
$(_self.attr('href')).modal('show');
});
Doesn't work.
You can use this to do that. It really helped me.
Default Bootstrap JavaScript is not working well with angular, because it makes changes in DOM model outside AngularJS. Please consider using native directives for bootstrap, like these http://mgcrea.github.io/angular-strap/
Also, for maximum simplicity, in many cases, you can use something like this plugin https://github.com/cgross/angular-prompt. It depends on bootstrap and gives you simple API based on promises.
prompt({
title: 'Give me a name',
message: 'What would you like to name it?',
input: true,
label: 'Name',
value: 'Current name',
}).then(function(name){
//name contains new value
});
Callback passed to then will be executed after clicking "OK" in popup.
I want to execute a function when the value of the select element changes (the select element in angular-strap is html tag)
My HTML:
<button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
My JS:
$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];
I tried putting an ng-click directive with a function in the controller but it captures the value of the current selected value on click not when the element changes
Thanks
There are a couple of options one is using ngChange Reference
The other is using $watch. See the $watch section of the scopeapi reference
An example using watch (this would be in your controller)
$scope.$watch('selectedCriteria', function() {
$scope.SomeFunction();
});
An example using ngChange
<button type="button" class="btn btn-default"
ng-change="SomeFunction()"
ng-model="selectedCriteria" data-html="1"
ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.
Below is my plunker edit.
I was able to get checkbox values. Now I'm trying to pass those checked values onclick to http or inside ng-click=deleteSelected function.
http://plnkr.co/edit/wsd3oDr3SyQXvO8Fdh5F
Can anyone help me ?
Now that you have bound the values to $scope.checked-messages, can't you just use the $scope in a click handler:
HTML:
<button id="btn-call" type="button" class="btn btn-danger" ng-click="callTheServer()">Call The Server</button>
JS (Controller):
app.controller('MainController', function($scope) {
$scope.checked_messages = [];
$scope.callTheServer = function() {
console.log($scope.checked_messages);
}
});
Here is an updated plunker.
You should wrap your form in a tag and declare your button as a submit type like this
<form ng-submit="deleteElements()">
//checkboxes stuff
<button id="btn-delete" type="submit" class="btn btn-danger">Delete</button>
</form>
Now in your controller you declare your deleteElements function :
$scope.deleteElements = function(){
console.log(this.checked_messages);
}
Answer from Davin is good but I try to avoid to bind everything to scope whenever I can.