I want to generate a span element for each saved tag from my collection tag's array.
I use firebase and get in *ngFor loop i get one big span element with all saved tags separated by comma, instead of getting a span for each tag. Is there any way that i can't prevent this from happening. Also i have created an interface for Saved.
Thanks in advance.
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div *ngFor="let tag of saved.tags">
<span class="badge badge-pill badge-primary">{{saved?.tags}}</span>
</div>
<hr /> View
</div>
</div>
//Saved interface in Saved.ts file
export interface Saved {
id: string;
title: string;
tags: string[];
}
Try having your code like this. This should make the span element repeat rather than the div and then make sure to reference the individual tag rather than the array inside.
If the tag has a name / title attribute swap {{ tag }} for {{ tag.title}}
looking at the interface its just {{ tag }}.
<div>
<span *ngFor="let tag of saved.tags" class="badge badge-pill badge-primary">
{{tag}}
</span>
</div>
Reference to Angular docs on using *ngFor to display data.
At the moment, you are referencing the array inside your *ngFor. So, as a result, you should see the whole list of n tags, for n times. If you switch from {{saved?.tags}} to {{tag}}. You will see one div per tag including one span and a single tag inside.
So for getting one span per tag, use it like the following:
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div>
<span class="badge badge-pill badge-primary" *ngFor="let tag of saved.tags">
{{tag}}
</span>
</div>
<hr />
View
</div>
</div>
I am using ng-repeat to list all the "zones". It works just fine on the first rendering and even when additional data from the server is added to the existing data it works without any issues or flickers. But when the "$rootScope.zones" is assigned a new value (the user can change the sort order from Alphabetical to Proximity, which sets a new value for the $rootScope.zones in that sorting order) the whole ng-repeat list goes blank for a few seconds and then works fine again.
This is not a very big issue except in the zones I have some text with CSS bubbles around. The text disappears but the bubbles remain.
How can I set the $rootScope.zones such that it doesn't create that flicker? Alternatively, how can I make sure that the "bubbles" only appear when the text is there.
This is my ng-repeat:
<ion-list class="card" ng-if="$root.currentMode.zoneBroadcast == true" can-swipe="true">
<div class="button-bar no-padding">
<button class="button bold" ng-class="{'button-calm': sortMethod === 'Alphabetically'}" ng-click="changeSortMethod('Alphabetically')">Alphabetically</button>
<button class="button bold" ng-class="{'button-calm': sortMethod === 'By Proximity'}" ng-click="changeSortMethod('By Proximity')">By Proximity</button>
</div>
<ion-item class="item no-border no-padding dark-bg" ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
<div class="item-divider text-center">
<span>
Zone ID : <span>{{zone.zoneName}}</span>
</span>
</div>
<div class="item-body" ng-class="checkIfZoneMatches(zone.zoneName) ? 'zone-broadcast-green' : parseStringToInteger(zone.Trips.length) > 0 ? 'zone-broadcast-red' : checkIfZoneCanBookIn(zone.zoneName) ? 'zone-broadcast-yellow' : zone.Lineup.FreeList.length > 0 ? 'zone-broadcast-blue' : 'zone-broadcast-normal'">
<div class="row">
<div class="col">
<span ng-class="{'lineup free' : zone.Lineup.FreeList.length != 0}">{{zone.Lineup.FreeList.toString()}}</span>
<span ng-class="{'lineup loaded' : zone.Lineup.LoadedList.length != 0}">{{zone.Lineup.LoadedList.toString()}}</span>
<span ng-class="{'lineup accepted' : zone.Lineup.AcceptedList.length != 0}">{{zone.Lineup.AcceptedList.toString()}}</span>
<span ng-class="{'lineup offered' : zone.Lineup.OfferedList.length != 0}">{{zone.Lineup.OfferedList.toString()}}</span>
<span ng-class="{'lineup break' : zone.Lineup.BreakList.length != 0}">{{zone.Lineup.BreakList.toString()}}</span>
<span ng-class="{'lineup stc' : zone.Lineup.STCList.length != 0}">{{zone.Lineup.STCList.toString()}}</span>
</div>
</div> ...
I have tried ng-if, ng-hide, track by, etc. but nothing seems to work.
Here's the CSS I am using to create the bubbles.
.lineup{
background: white;
border-radius: 2em;
font-weight: bold;
font-size: 100%;
padding: 1%;
}
.free {
color: #00b140;
}
.loaded{
color: #6b46e5;
}
.accepted{
color: #0a9dc7;
}
.offered{
color: deeppink;
}
.break{
color: orangered;
}
.STC{
color: saddlebrown;
}
I expect the bubbles to appear only when the text is there. Moreover, when the sort order is changed by the user it should not go blank for over 2 seconds then render the template.
I would really appreciate your help.
Instead of using ng-if with ng-repeat, pipe to a filter:
SLOW
<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
Faster
<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in zones | filter : zoneFilter track by zone.zoneName">
$scope.zoneFilter = function(item) {
return $scope.checkVisibility(item);
};
For more information, see
AngularJS filter API Reference
Changing
zone.Lineup.FreeList.length != 0 to zone.Lineup.FreeList.length > 0 solved the bubble problem.
I am building an application using Ionic (version 1) and would like to hide a div from the controller when the user is scrolling. I am stuck and don't know where to start.
This is my code:
<body ng-app="starter" style="padding-top:150px;">
<div ng-controller="AppCtrl" id="header" >
<div class="bar-aaa">
<div class="myLogo">
<img src="img/images/logo.png" style="display: block;margin-left:auto;margin-right:auto;height:50px;margin-top:10px;margin-bottom:30px;" alt=""/>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="col col-33" style="border-bottom: 2px solid {{oneLine}};margin-bottom: 0;height: 59px;"><img src="{{one}}" style="display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{twoLine}};margin-bottom: 0;height: 59px;"><img src="{{two}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{threeLine}};margin-bottom: 0;height: 59px;"><img src="{{three}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
</div>
</div>
</div>
<span ng-show="loading" style="position: absolute;z-index: 99999;margin-left:-75px;top:150px;left:50%;right:50%;background:rgba(0,0,0,0.5);text-align:center;padding:15px;width:150px;" >
<div>
<ion-spinner icon="spiral"></ion-spinner>
<h5 style="color:#fff;">Processing...</h5>
</div>
</span>
<ion-nav-view></ion-nav-view>
</body>
Your question does not explain which <div> you are trying to hide and what code you have tried to use already, but can you assign a function to the on-scroll directive of the ion-content and do whatever you want to do in that function. So like this:
<ion-content on-scroll="scrollFunction()">
And then in your controller add a function called scrollFunction or preferably something more descriptive.
$scope.getScrollPosition = function() {
// Here you can do whatever you want when someone is scrolling.
}
You could for example update a variable in this function and assigned that variable to the ng-show of the <div> you want to show or hide.
To answer your other question regarding why the getScrollPosition() function keeps returning 0. It is a known issue, you can find similar reports here. I am not entirely sure why this happens, but it seems like Ionic is grabbing the scroll position of a different view causing it to stay 0. You can solve this by assigning a delegate-handler to your <ion-content>, which basically gives you an unique identifier to work with. It would look something like this:
<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">
And then in your controller, instead of doing the following:
$ionicScrollDelegate.getScrollPosition().top;
You need to do this:
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;
That should solve the issues you are experiencing.
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
Working with Bootstrap and AngularJS, is there a way to ng-repeat horizontally with a new row for every set amount of elements?
I have been playing around with ng-class to accomplish this Fiddle, but the problem is that I can't get the float left divs within the initial row div... Any thoughts, am I not thinking of something or would this best be done with a Directive?
Here is my code (live example in the above fiddle link):
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="num in numbers"
ng-class="{'row': ($index)%2==0, 'col-md-6': ($index)%2!=0}">
<div ng-class="{'col-md-6': ($index)%2==0}">
{{num}}
</div>
</div>
</div>
</body>
var myApp = angular.module('myApp', [])
.controller('MyCtrl', function ($scope) {
$scope.numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
});
.row {
clear: both;
width: 100%;
border: 1px solid red;
}
.col-md-6 {
width: 50%;
float: left;
border: 1px solid blue;
}
If you are working with Bootstrap 3 and AngularJS you can declare a new filter that will return one array of sub array slices and then do two ng-repeat.
It will look like that:
<div class="row" ng-repeat="row in filtered = (arr | splitArrayFilter:3)">
<div class="col-md-4" ng-repeat="n in row">
<h3>{{n}}</h3>
</div>
</div>
app.filter('splitArrayFilter', function() {
return function(arr, lengthofsublist) {
if (!angular.isUndefined(arr) && arr.length > 0) {
var arrayToReturn = [];
var subArray=[];
var pushed=true;
for (var i=0; i<arr.length; i++){
if ((i+1)%lengthofsublist==0) {
subArray.push(arr[i]);
arrayToReturn.push(subArray);
subArray=[];
pushed=true;
} else {
subArray.push(arr[i]);
pushed=false;
}
}
if (!pushed)
arrayToReturn.push(subArray);
console.log(JSON.stringify(arrayToReturn));
return arrayToReturn;
}
}
});
You can Find it on Plunker here: http://plnkr.co/edit/rdyjRtZhzHjWiWDJ8FKJ?p=preview
for some reason the view in plunker does not support bootstrap 3 columns but if you open it in embedded view or in browsers you can see that it works.
It was clever what you were doing with ng-class. I hadn't ever thought of using %2 within the expression there.
But for future reference, there is a slightly easier way to accomplish that: ng-class-even and ng-class-odd. It does the same thing as what you were doing, but just a bit cleaner:
<div ng-repeat="num in numbers" ng-class-even="'md-col-6'" ng-class-odd="'row'">
{{num}}
</div>
But this doesn't resolve your problem. If I understand you correctly, you want a row, with two columns within that row. The easiest way I could think of is to split up the arrays. Put the repeat on the div, then have 2 span within the div. I think one of the issues that you had originally, is that you were repeating a single div, and trying to treat that block element as an inline
Controller
myApp.controller('MyCtrl', function ($scope) {
$scope.evens = ["2","4","6","8","10","12","14"];
$scope.odds = ["1","3","5","7","9","11","13"];
});
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="odd in odds" class="row">
<span class="span3">{{odd}}</span>
<span class="span2">{{evens[$index]}}</span>
</div>
</div>
Fiddle
Being that you're using version 1.1.5, that also opens you up to a new directive: ng-if! You could also use ng-switch to do some conditional logic displays.
You didn't include bootstrap in your fiddle, and for some reason I can't get jsFiddle to display bootstrap. So I created some temp CSS classes that would somewhat resemble bootstraps class="span"
No need to add .row class .. I did this:
HTML:
<div ng-repeat="product in allProducts">
<div class="my-col-50">
<h1>{{product.title}}</h1>
</div>
</div>
CSS:
.my-col-50{float:left;width:50%;}
and it's work like a charm.
Although this isn't the "proper" way of doing this, there is a way to achieve this using CSS.
For example, this is for a 3 column layout:
HTML:
<div class="row">
<div ng-repeat="(key, pod) in stats.pods" class="pod-wrap">
<div ng-if="objectCheck(pod) == false" class="col-md-4 col-sm-4 pod">
<div>
<h2 ng-bind="key"></h2>
<p class="total" ng-bind="pod | number"></p>
</div>
</div>
<div ng-if="objectCheck(pod) == true" class="col-md-4 col-sm-4 pod">
<div>
<h2 ng-bind="key"></h2>
<div ng-repeat="(type, value) in pod track by $index">
<p class="status"><% type %> <small><% value %></small></p>
</div>
</div>
</div>
</div>
</div>
CSS:
.pod-wrap:nth-of-type(3n):after {
display: table;
content: '';
clear: both;
}
I tried two of the suggestions given here...
the one by yshaool works fine but like i commented on it give me that infinite loop error.
Then I tried something like below:
<div class="row" ng-repeat="row in split($index, 3, row.Attempts)">
<div class="col-md-4" ng-repeat="attempt in row">
<div>Attempt {{row.AttemptNumber}}</div>
<div>{{row.Result}}</div>
</div>
</div>
and the function:
$scope.split = function (index, length, attempts) {
var ret = attempts.slice(index * length, (index * length) + length);
console.log(JSON.stringify(ret));
return ret;
}
was going somewhere with that when i realized that it could be as simple as
<div ng-repeat="attempt in row.Attempts">
<div class="col-md-4">
<div>Attempt {{attempt.AttemptNumber}}</div>
<div>{{attempt.Result}}</div>
</div>
</div>
using "col-md-4" does the trick as I only need to split using three columns per row..
(let bootstrap do the work!)
anyway the other answers here were really useful...
Depending upon the number of columns that you need in your template, create chunks of the original data source in your controller.
$scope.categories = data //contains your original data source;
$scope.chunkedCategories = [] //will push chunked data into this;
//dividing into chunks of 3 for col-4. You can change this
while ($scope.categories.length > 0)
$scope.chunkedCategories.push($scope.categories.splice(0, 3));
In your template you can now do the following
<div class="row" ng-repeat="categories in chunkedCategories">
<div class="col-xs-4" ng-repeat="category in categories">
<h2>{{category.title}}</h2>
</div>
</div>
My approach was to use the $index variable, which is created and updated by AngularJS within an ng-repeat directive, to trigger a call to the CSS clearfix hack which, in turn, resets to a new row.
I am using the following versions: AngularJS 1.5.5 and Bootstrap 3.3.4
<!-- use bootstrap's grid structure to create a row -->
<div class="row">
<!-- Cycle through a list: -->
<!-- use angular's ng-repeat directive -->
<div ng-repeat="item in itemList">
<!-- Start a new row: -->
<!-- use the css clearfix hack to reset the row -->
<!-- for every item $index divisible by 3. -->
<!-- note that $index starts at 0. -->
<div ng-if="$index % 3 == 0" class="clearfix"></div>
<!-- Create a column: -->
<!-- since we want 3 "item columns"/row, -->
<!-- each "item column" corresponds to 4 "Bootstrap columns" -->
<!-- in Bootstrap's 12-column/row system -->
<div class="col-sm-4">
{{item.name}}
</div>
</div>
</div>
To keep solution bootstrap formated i solved this using ng-class
<div ng-repeat="item in items">
<div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
<div class="col-md-3">
{{item.name}}
</div>
</div>
</div>