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
Related
I have this in the footer :
<div class="bar bar-footer bar-assertive" ng-show="withdarawStatus">
<button class="button button-assertive" id="applyButton" ng-click="withdraw()">
Successfully Applied! Withdraw?
</button>
</div>
<div class="bar bar-footer bar-positive" ng-show="!withdarawStatus" >
<p id="applyButton" >Application Withdrawn</p>
</div>
I want to write a function that when I click withdraw() the footer changes to "Application Withdraw" footer.
I tried this but it didn't work, unless i reload the entire page.
$scope.withdraw = function() {
$scope.withdrawStatus = true;
}
You have a typo in your HTML ng-show="!withdarawStatus" should be ng-show="!withdrawStatus". That should fix the issue.
Edit: Here's a working codepen
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>
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)
Since I'm a little weak with Javascript and still learning Angular.
I'm having trouble trying to combine a couple of UI's, not all at once of course.
Let me explain what I'm trying to do.
I have a sidemenu and I want to add a swipe card page when I tap on the swipe page in my menu. See my image below.
Having problem wrapping my head around how Angular does things, so any pointers & tips would be appreciative.
Is this what you are looking for?
http://codepen.io/andrewmcgivery/pen/bqEeI
Basically, to mix the two together, the ion-pane that contains the page of the swipe cards has to be in an ion-view.
<ion-view title="Welcome">
<ion-pane ng-controller="CardsCtrl">
<swipe-cards on-card-swipe="onSwipe($event)">
<swipe-cards>
<swipe-card on-card-swipe="cardSwiped()" id="start-card">
Swipe down for a new card
</swipe-card>
<swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
<div ng-controller="CardCtrl">
<div class="title">
{{card.title}}
</div>
<div class="image">
<img ng-src="{{card.image}}">
</div>
<div class="button-bar">
<button class="button button-clear button-positive" ng-click="goAway()">Answer</button>
<button class="button button-clear button-positive" ng-click="goAway()">Decline</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</ion-pane>
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.