pass button id in ng-click angular.js - angularjs

I need to pass button id in Ionic Framework.
Here is what I have tried.
In js code:
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
{
$scope.showAlert = function(btnId) {
alert(btnId);
};
}
});
In html:
<button id="a" class="button button-light" data="{{button.id}}" ng-click="showAlert(data.id)">
Click Me
</button>
O/P: undefined
or
<button id="a" class="button button-light" data="{{button.id}}" ng-click="showAlert(data)">
Click Me
</button>
O/P: undefined
or
<button id="a" class="button button-light" data="{{event.id}}" ng-click="showAlert(data.id)">
Click Me
</button>
O/P: undefined
or
<button id="a" class="button button-light" ng-click="showAlert(this.id)">
Click Me
</button>
O/P: undefined
or
<button id="btnId" class="button button-light" ng-click="showAlert('btnId')">
Click Me
</button>
O/P: btnId
Is this correct way to directly write id of button in function?
I referred to a few answers like this. So I think I am making some mistake in using it. Please let me know what I need to change.

Yo, check this gist:
https://gist.github.com/lc-nyovchev/ed0a640a82a0f2dfd5a1
That is a very easy and naive way to do it.
<div data-ng-init="btnId='asd';">
<button data-ng-attr-id="btnId" class="button button-light" data-ng-click="showAlert(btnId)">
Click Me
</button>
</div>
Or you can have in your controller:
$scope.btnId = 'asd';
Then you don't need the ng-init block div.
Or you can get a handle to the $event in your ng-click, and get its target, and then get its id, but I wouldn't recommend that, it is not the angular way of doing things:
<button id="bla" class="button button-light" data-ng-click="showAlert($event)">
Click Me
</button>
$scope.showAlert = function(event){
alert(event.target.id);
}

This works if no repeaters are there , if repeaters are the data attribute should have different names and secondly event.CurrentTarget.Id will make it work.

Related

NgTable : how to clear filters

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>

ui.bootstrap popover close on click

I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>

How to implement "control group" in Ionic?

I am trying to implement "control group" in Ionic,
Below is my expectation:
But I couldn't find any in Ionic,
this is the link I refer to:
http://ionicframework.com/docs/components/#header
Any suggestion ?
i dont think Ionic has that implemented at the moment the only suggestion i could make would be to either use toggle (bad way) or to use to different buttons I used this way when i created 2 Listcontainers to switch between them
<div class="button-bar">
<a class="button" ng-init="showme=true; setshowme(true)" ng-click="showme=true; setshowme(true)" ng-class="{'active': showme == true}">{{::lang.pnlPosOffenML}}</a>
<a class="button" ng-click="showme=false; setshowme(false)" ng-class="{'active': showme == false}">{{::lang.pnlPosErledigtML}}</a>
</div>
This is what i came up with
Hi This is worked for me, In your html file write the code as
<ion-item>
<button class="button button-light" ng-disabled="!allow" ng-click="selectedMale()">Male</button>
<button class="button button-light" ng-disabled="!notAllow" ng-click="selectedFemale()">Female</button>
</ion-item>
<ion-item>
<button class="button button-light" ng-disabled="!notAllow" ng-click="selectedFemale()">Male</button>
<button class="button button-light" ng-disabled="!allow" ng-click="selectedMale()">Female</button>
</ion-item>
and in your controller the code is
$scope.allow = true;
$scope.notAllow = true;
$scope.selectedMale = function(){
$scope.notAllow = false;
}
$scope.selectedFemale = function(){
$scope.allow=false;
}
please reply if having any queries

Follow download link and dismiss modal?

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>

Onchange event with AngularStrap select element

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>

Resources