Ionic slider not showing content initially - angularjs

When i load a template on click of button using $state.go() slider embedded in template not displaying its content.
When i rotated my device then it start showing the slides.
Please sugggest what i am missing in this code snippet of template.
<ion-slide-box on-slide-changed="" show-pager="true">
<ion-slide ng-repeat="placementStep in placementSteps">
<div class="list card">
<div class="item-divider">
<div class="row">
<div class="col">
<h1 class="title">{{placementStep.stepName}}</h1>
</div>
<div class="col">
<button class="button icon ion-chevron-right button-positive button-small right" ng-if="$index!=placementSteps.length-1&& placementStep.studentsForStep.length!=0" ng-click="moveStudents(placementStep,placementSteps,0)"></button>
<button class="button icon ion-chevron-left button-positive button-small right" ng-if="$index!=0 && placementStep.studentsForStep.length!=0" ng-click="moveStudents(placementStep,placementSteps,1)"></button>
</div>
</div>
</div>
<ion-list show-reorder="data.showReorder" can-swipe="false" ng-class="has-header">
<ion-item ng-repeat="student in placementStep.studentsForStep">
<div class="row">
<div class="left checkbox">
<input type="checkbox" ng-checked="student.checked==true" ng-model="student.checked">
</div>
<div class="col vertical-center">
{{student.first_name}}
</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>

Call This function,
$ionicSlideBoxDelegate.update();
Immediately after loading the image files or directly within the controller definition for that view.
notice the absence of of the getbyhandle();

I used delegate handle to update the slide box after loading data. It worked.
$ionicSlideBoxDelegate.$getByHandle('placementStepSlideBox').update();
Where "placmentStepSlideBox" is the delegate handle name.

Related

Create clickable buttons in Ionic v1 card

I have a project in Ionic v1 and I am making some enhancements to it.
I have a list of cards where the card itself is clickable to take the user to more details. I need to add couple buttons on the card but I can't get the clicks to be captured by the button - the click goes to the card href. Sample code below.
<div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
<div class="item" ng-click="clickCard(evtKey)">
<div class="row">
<div class="col-20 row-center">
<div> Some stuff here</div>
</div>
<div class="col-80 item-text-wrap">
<div> More stuff here </div>
<div class="row text-center">
<div class="col col-33">
<div> More stuff </div>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('Yes')">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('No')">No</button>
</div>
</div>
</div>
</div>
<p class="item-icon-right"><i class="icon ion-chevron-right icon-accessory"></i></p>
</div>
</div>
Looking for help on how to make the click on the button be captured by the button and not by the card. Examples I have found so far are all on doing that with Ionic v2 and later and not for v1.
Thanks,
-S
event.stopPropagation() will stop calling event from parent elements. And also don't put alert in ng-click
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('Yes');$event.stopPropagation();">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('No');$event.stopPropagation();">No</button>
</div>

angularjs stop at last item ng-repeat

I'm building an app with AngularJS.
Inside this app I would like to have 2 buttons on each row, except when the total buttons are not even.
How can I let the code stop creating the last col?
With the next code the 6th button (on a array with 5 items) is empty. I don't want this one on the screen.
<div ng-repeat="tool in tools">
<div class="row" ng-if="$even">
<div class="col" ng-repeat="tool in [tools[$index],tools[$index + 1]]">
<button class="button button-block button-{{tool.color}}">
<i class="icon {{tool.icon}}"></i>
<br>{{tool.name}}
</button>
</div>
</div>
</div>
Switch the inner ng-repeat to use limitTo filter;
<div ng-repeat="tool in tools">
<div class="row" ng-if="$even">
<div class="col" ng-repeat="tool in tools | limitTo:2:$index">
<button class="button button-block button-{{tool.color}}">
<i class="icon {{tool.icon}}"></i>
<br>{{tool.name}}
</button>
</div>
</div>
</div>

Ionic / AngularJS key not accessible in ng-repeat

I am trying to access the {{key}} from an ng-repeat from a controller using Ionic 1. The {{key}} that is generated as text is different from the {{key}} I am receiving at the controller, not sure why this is.
What I want to do is find the div id which should be dynamically generated using the id = "historyHeader_{{key}}" and need to receive it using ng-click="loadInlineHistory({{key}})"
Controller:
$scope.loadInlineHistory = function (dateLoaded) {
var textS = $("#historyHeader_"+dateLoaded).text();
}
View
<ion-list>
<div ng-repeat="(key, value) in history | groupBy: 'date'"" style="background:#fff;padding:0.4em">
<div class="item item-divider">
<span style="min-height: 100%" id="historyHeader_{{key}}"> {{key}}</span>
</div>
<div style="width: 100%">
<div class="row" ng-repeat="hist in value">
<div ng-click="testRepeatx()">
<div class="row">
<div class="col col-50" align="left">3 laterals </div>
<div class="col col-50" align="left" style="color:#999">{{hist.reps}} calories</div>
</div>
</div>
</div>
<div class="row" >
<button class="button button-block button-balanced" ng-click="loadInlineHistory({{key}})"> <i class="ion-plus"></i></button>
</div>
</div>
</div>
</ion-list>
Just remove the curly brackets from the ng-click function call.
<div class="row" >
<button class="button button-block button-balanced"
ng-click="loadInlineHistory(key)"> <i class="ion-plus"></i></button>
</div>

create animation in angular js after data changes

I have created a slider which slides 3 data at one time. But i want to add some animation like that of real slide. How do i do in angular js? I have code like below
moverightRecArts changes the startIndexArt and endIndexArt values from controller.
<div class="col-md-12">
<div class="col-md-4" ng-repeat="a in abc.slice(startIndexArt, endIndexArt)" >
<div class="col-md-12">
<div class="col-md-3">
<img ng-src="{{a.url}}">
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<h3>{{a.sub}}</h3>
</div>
<div class="col-md-12">
<p>{{a.bod}}</p>
</div>
</div>
</div>
</div>
<div class='col-move-next-Art'>
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right" ng-click="moverightRecArts()"></span>
</div>
Pleas check https://daneden.github.io/animate.css/
Dynamic Animation
You have to call animation function like
<ion-view class="myAnimation">
<ion-content>
....
</ion-content>
</ion-view>
and add class when page is loaded
$('#myAnimation').addClass('animated shake');
and after animation finish you have to remove class which is added to div so again animation works without refresh page. for that you have to do that
$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);
function removeClass()
{
$('#myAnimation').removeClass('animated shake');
}
This way is dynamic but you can also set as static in html like
Static
<ion-view class="animated shake">
<ion-content>
....
</ion-content>
</ion-view>

how to unlock/enable and change opacity/transparency of a <div> with angular when some <button> is clicked

I want to simulate an effect similar to ng-disable in buttons which disables and makes button semitransparent, but on a div.
I'm using ionic framework (just in case).
I have this div, I want it to have transparency/opacity to 50% and to be disabled at the beginning:
<div class="suboption">
<div class="description-and-dropdown-wrapper" >
<h4>{{specialtyName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content >
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
But once a button in an another div has been clicked to make its transparency to 0% and to enable all contents inside the first div, this is the other div, So on cityClick() I want to trigger something that unlocks/enables all contents in first div and sets tranparency of first div to 0%:
<div class="description-and-dropdown-wrapper">
<h4>{{cityName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-click="citiesPopover.show($event)">
<script id="popoverCities.html" type="text/ng-template">
<ion-popover-view>
<ion-content >
<div class="list">
<ul>
<li class="item" ng-repeat="city in cities" ng-click="cityClick(city)"> //NOTICE cityClick() HERE
{{city.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
I'm a newbie with angular so I just want someone to point me in the right direction to do this.
I could do this by using ng-class to toggle between two classes 1 with opacity and the other one without opacity and using the same var of ng-class to ng-disable enable the button:
<!-- ng-class with ternary operator: if disableSpecialty then class=disabled-suboption else class=suboption -->
<div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper" >
<h4>{{specialtyName}}</h4>
<div class="buttons">
<!-- if disableSpecialty === true then disable the button-->
<button class="button button-icon ion-ios-arrow-down" ng-disabled="disableSpecialty" ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content >
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>

Resources