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>
Related
I have looked at almost every solution I could find about this but I can't get my code to work. I wan't to put a banner after 3 ng-repeats
<div class="row products-row" ng-init="onInit()">
<div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>
</div>
use $index
like
<div id="banner" ng-show="$index == 3"></div>
Now this will show banner div when its the third element of ng-repeat.
Your <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div> is outside of <div> containing ng-repeat tag. due to that $index is undefined.
Just put it inside the div of ng-repeat and it will work.
Try this:-
<div class="row products-row" ng-init="onInit()">
<div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="col col-34 fashion-product-container">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
</div>
</div>
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
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>
I have a table with an ng-repeat over a function that I want to be rerendered after a user logs in. How do I make a view load the ng-repeat and again to triger the function. Is there a way to make an ng-repeat rerender on a change in the model?
Here is the view, to give an idea why a function is used instead of just looping over a model. The repeat in question is ng-repeat="(index, event) in vm.getEvents(dayObject) track by $index" :
<!-- CALENDAR NAV -->
<div class="calendar-nav">
<div class="prev">
<button class="btn btn-default pull-right" ng-click="vm.goToPrevWeek()" ng-disabled="vm.isCurrentWeek"><i class="glyphicon glyphicon-chevron-left"></i></button>
</div>
<div class="date">
<p class="text-primary text-center">{{vm.weekViewString}}</p>
</div>
<div class="next">
<button class="btn btn-default pull-left" ng-click="vm.goToNextWeek()"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
<!-- END CALENDAR NAV -->
<!-- CALENDAR HEADER -->
<div class="calendar-header">
<div class="weekdate-header date-header day-1 split-{{vm.weekSplit}}" ng-class="{'today': dayObject.isToday}" ng-repeat="(index, dayObject) in vm.calendarDays track by $index">
<div class="date-container"><span class="date">{{dayObject.day}}</span><span class="week-day"> {{dayObject.weekDay}}</span></div>
</div>
</div>
<!-- END CALENDAR HEADER -->
<!-- CALENDAR CONTENT -->
<div class="calendar-content">
<div class="calendar-aside">
<div class="day-hour" ng-repeat="(index, hourObject) in vm.calendarHours track by $index">
<span class="hour">{{hourObject.hour}}</span>
</div>
</div>
<div class="calendar-days">
<div class="calendar-day day-col day-1 split-{{vm.weekSplit}}" ng-class="{'today': dayObject.isToday}" ng-repeat="(index, dayObject) in vm.calendarDays track by $index">
<div class="mobile-day hidden-lg hidden-md hidden-sm">
<div class="date-container"><span class="date">{{dayObject.day}}</span><span class="week-day"> {{dayObject.weekDay}}</span></div>
</div>
<div class="day-hour hour-{{hourObject.number}}" ng-repeat="(index, hourObject) in vm.calendarHours track by $index">
<div class="hour">
<div class="half-hour"></div>
</div>
</div>
<!-- CALENDAR EVENTS -->
<div id="{{event.idName}}" class="event-container {{event.type}}" style="top: {{event.top}}px; left: {{event.left}}%; width: {{event.width}}%; height: {{event.height}}px;"
ng-repeat="(index, event) in vm.getEvents(dayObject) track by $index" ng-switch="event.type">
<div class="buttons" ng-switch-when="">
<div class="amount">{{event.spotsAvailable}}</div>
</div>
<div class="buttons" ng-switch-when="success">
<i class="glyphicon glyphicon-ok-sign"></i>
</div>
<div class="buttons" ng-switch-when="full">
<i class="glyphicon glyphicon-ban-circle"></i>
</div>
<div class="text">
<span class="title">{{event.name}}</span>
<p class="locatie-time hidden-lg hidden-md hidden-sm"> <span>{{event.startsAt | date:'HH:mm' }}</span> - <span>{{event.endsAt | date:'HH:mm' }}</span> </p>
<span class="locatie-info">{{event.formattedAddress}}</span>
</div>
</div>
<!-- END CALENDAR EVENTS -->
</div>
</div>
</div>
<!-- END CALENDAR CONTENT -->
I ended up replacing the function in the ng-repeat with a direct link to the data the function was returning and now the view is updating.
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.