I am trying to do angular ng-repeat with bootstrap panel using below code
<div class="row" ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="col-sm-4">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
It's working fine but its appearance is vertical not side by side. How can I set these panels side by side?
Is there any way to achieve these features?
Thanks in advance.
Use ng-repeat over .col-sm-4 as follows
<div class="row">
<div class="col-sm-4"
data-ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>
Bootstrap row works on 12 grid. But if a row has more than 12 grid it will wrap it new line..
<div ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="row" >
<div class="col-sm-4">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
</div>
You missed the layout . Probably this might help you
Related
I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.
This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>
I have one div as row and 4 div as column. I want to close row div after 4 cloumn div.
<div class="row">
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
</div>
<div class="row">
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
</div>
Now in ng-repeart
<div class="row">
<div class="col" ng-repeat="x in values">
{{x.name}}
</div>
<div ng-if="$index % 4==0">
<div class="clearfix"></div>
</div>
<div class="row">
</div>
it's not working for me
I also tried this as refrence but it only add clearfix div only. Not close the div class="row"> and not start again div class="row">
The clearfix solution assumes you are using Bootstrap CSS. If you're not then you'll have to grab the clearfix class from Bootstrap.css.
If you are including Bootstrap, and looking to use Bootstrap to do the layout then you can use:
<div ng-init="a = [1,2,3,4,5,6,7,8]"> <!-- sample data !-->
<div class="row">
<div ng-repeat="product in a">
<div class="clearfix" ng-if="$index % 4 == 0"></div>
<div class="col-sm-3">
<h2>{{a[$index]}}</h2>
</div>
</div>
</div>
</div>
Here's the demo: http://plnkr.co/edit/ibRsIfazxea2KpGmUg42?p=preview
Note I've reworked the answer from https://stackoverflow.com/a/32358013/1544886 to your requirements
Another option (based on https://stackoverflow.com/a/30259461/1544886)
<div ng-repeat="product in a" ng-if="$index % 4 == 0" class="row">
<div class="clearfix" ng-if="$index % 4 == 0"></div>
<div class="col-sm-3">{{a[$index]}}</div>
<div class="col-sm-3" ng-if="a.length > ($index + 1)">{{a[$index + 1]}}</div>
<div class="col-sm-3" ng-if="a.length > ($index + 2)">{{a[$index + 2]}}</div>
<div class="col-sm-3" ng-if="a.length > ($index + 3)">{{a[$index + 3]}}</div>
</div>
You likely don't need the clearfix div, but as you have indicated in the comments that you want it as well, I have included it above.
Change it below like this: $index is available inside your ng-repeat and not outside.
<div class="row">
<div class="col" ng-repeat="x in values">
{{x.name}}
<div ng-if="$index % 4==0" class="clearfix"></div>
<div class="row">
</div>
</div>
</div>
I have a plunker here - http://plnkr.co/edit/AmoiJi8k000OKA6TNdcz?p=preview
I'm using dummy json here - http://myjson.com/4aqlh
I want to display the json content in different parts of the page based on a value in the json
So the stories with a value of Section: "New" will be displayed in one div and 'Old' in another.
This works in the first div where 'New' is dispalyed but in the second div that should only display 'Old', it displays all the stories.
Is there something wrong with the filter or is something to do with the order Angular builds the page.
<div class="container" data-ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6">
<div class="story" data-ng-repeat="story in stories | filter: story.Section='New' " >
{{story.Title}}
{{story.Section}}
</div>
</div>
<div class="col-sm-6">
<div class="story" data-ng-repeat="story in stories | filter: story.Section='Old' ">
{{story.Title}}
{{story.Section}}
</div>
</div>
</div>
</div>
This is how you do filtering with filter
<div class="col-sm-6">
<div class="story" data-ng-repeat="story in stories | filter: {Section:'New'}" >
{{story.Title}}
{{story.Section}}
</div>
</div>
<div class="col-sm-6">
<div class="story" data-ng-repeat="story in stories | filter: {Section:'Old'}">
{{story.Title}}
{{story.Section}}
</div>
</div>
It takes an object syntax. = is an assignment operator. See filter documentation
Specify the expression in the filter explicitly and it will work.
Working plunker: http://plnkr.co/edit/yLIO14rlWdCFKtmg3b3N?p=preview
<div class="container" data-ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6">
<div class="story" data-ng-repeat="story in stories | filter: story: story.Section='New' " >
{{story.Title}}
{{story.Section}}
</div>
</div>
<div class="col-sm-6">
<div class="story" data-ng-repeat="story in stories | filter: story: story.Section='Old' ">
{{story.Title}}
{{story.Section}}
</div>
</div>
</div>
</div>
I need to create a strcuture as below in my app through ng-repeat.
<div class="row">
<div class="col-50">1</div>
<div class="col-50">2</div>
</div>
<div class="row">
<div class="col-50">3</div>
<div class="col-50">4</div>
</div>
Right now my code is as below:
<div class="row">
<label class="item item-radio col col-50" ng-repeat="a in question.answer">
<input type="radio" name="answers" class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct }}")'>
<div class="item-content">
<img src="img/ans/{{ a.option }}" />
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
But in the above code, its just a single row tag that I have. I wan't to somehow get the row tag contain/wrap every 2 items in the loop. What is the best way to achieve this?
Ref: Ionic Grid Doc
I managed to do it using $even.
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50">{{numbers[$index]}}</div>
<div class="col col-50">{{numbers[$index + 1]}}</div>
</div>
</div>
Here's a working JSFiddle.
The solution from #Patrick Reck is excellent, but it forces you to repeat your code twice,
I suggest this improvement:
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50"
ng-repeat="num in [numbers[$index],numbers[$index + 1]]">
{{num}}
</div>
</div>
</div>
this way you will write your code one time as if it is a normal ng-repeat
You can add flex-wrap: wrap to class row
http://jsfiddle.net/0momap0n/99/
<div ng-controller="MyCtrl">
<div class="row" style="flex-wrap: wrap">
<div class="col col-50" ng-repeat="number in numbers">{{number}}</div>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.numbers = [1, 2, 3, 4, 5, 6];
}
I would write it like this, you can increase the $index % 3 to match the number of columns that you would like, this one will create 3 columns ...
<div class="row">
<div class="" ng-repeat="i in range(1, 9)">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col">
<h1>{{ i }}</h1>
</div>
</div>
</div>
This solution is using flex-flow and solves this brilliantly:
CSS
.container {
display: flex;
flex-flow: row wrap;
}
.item {
width: 50%;
}
HTML
<div class="container">
<div class="item" *ngFor="let number of numbers">
{{number}}
</div>
Try like below. you can create any number of columns by using the below code. all you need to use the size property of the ionic grid and replace noOfColumns with your what number of columns you want. in this case just use 2 for noOfColumns. it will work like a charm.
Angular grid is based on a 12 column layout with different breakpoints based on the screen size. ref: https://ionicframework.com/docs/layout/grid
<ion-grid>
<ion-row >
<ion-col ng-repeat="n in numbers" size="{{12/noOfColumns}}">
{{ n }}
</ion-col>
</ion-row>
</ion-grid>
I have coded this:
.row {
display: table-row;
}
.table {
display: table;
}
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">x</div>
</div>
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
</div>
However the that does the ng-repeat causes problems when it's used inside a display: table-row.
What I really need to do is to have something that will do the repeat and have only the things I want repeating show up. In this case the with ng-repeat in it appears in the dom. I did think of using something like a and putting the ng-repeat in that but I am not sure this is syntactically correct when I'm inside a that's a type of display: table.
Is there a way to do this with angular?
Sure. Assuming you're using Angular 1.2 or later, see ng-repeat-start and ng-repeat-end.
So this:
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
would become this:
<div class="row" data-ng-repeat-start="x in modal.xx">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row" data-ng-repeat-end>
<div class="cell">z</div>
<div class="cell">z</div>
</div>