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>
Related
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>
I have some products displayed with ng-repeat and paginated. I want someone who can help me with ng-if - to say when ng-repeat finishes or there are no more products when the pagination is over. this is like a carousal previous-next (in one page, four products will be there
<span ng-if='curPage >= category.data.length'>
<center><p class="no-products"> There are no more products to show </p> </center>
</span>
<div class = "col col-25" ng-repeat="product in category.data| pagination: curPage * pageSize | limitTo: pageSize">
<a href="#/tab/details?product_id={{product.id}}"><img class="full-image" src="{{product.link}}">
</a>
<center> <p class="productnamei">
<strong> {{product.name}}</strong> </p>
<a ng-href="#/tab/details?product_id={{product.id}}" class="button button-small button-calm">
Buy Now
</a>
</div>
you can check it with $last ($last boolean true if the repeated element is last in the iterator.)
Example
<body ng-app="app">
<div ng-repeat ="item in [1,2,3]" tooltip>
<span data-toggle="tooltip" ng-bind="item"></span>
<div ng-if="$last">Completed</div>
</div>
</body>
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>
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.
I using Bootstrap 3 and like to re-ordering the grid column in mobile layout.
Desktop is looks like as screenshot:
where open in mobile phone, the picture is goes to bottom, isn't possible to place the picture to top by re-ordering the grid column when user view in mobile version?
code for the output:
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div>John Smith</div>
<div>Application Engineer</div>
<div>
<dl class="dl-horizontal">
<dt>Reg. Number</dt><dd>M8553</dd>
<dt>Mobile Number</dt><dd>012-5229887</dd>
<dt>Email</dt><dd>john.smith#email.com</dd>
</dl>
</div>
<div class="row">
<div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div>
<div class="col-xs-12 col-lg-10">
<div>
<span>
<button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button>
</span>
<a class="btn btn-success btn-alink" role="button" href="mailto:feedback#email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a>
</div>
<div><span>0</span> liked, 63 views.</div>
</div>
</div>
</div>
<!-- /.col-lg-9 -->
<div class="col-sm-4 col-lg-3">
<img src="images/john-smith.jpg" alt="john-smith">
</div>
<!-- /.col-lg-3 -->
</div>
<!-- /.row -->
</div>
Take a look at this
Column ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
heres the link http://getbootstrap.com/css/