I set variable value using AngularJS.
<div class="col-md-5">Cost:</div>
<div class="col-md-7">{{ cost }}</div>
<div class="col-md-5">Total:</div>
<div class="col-md-7">{{ total }}</div>
And I see
Cost: 5
Total: 7
But when cost = "", I see:
Cost: Total:
7
But I want to see:
Cost:
Total: 7
How to configure my HTML?
Surely you could simply add a line break?
<br />
Either that or you could write a script that would test the value of the cost. Why would the cost be = to "" anyway? Surely to have the total there would be a cost?
Try setting the cost = " ", with the space inbetween.
You could also use php I suppose.
You can wrap your line into div.row, like this:
<div class="row">
<div class="col-xs-5">Cost:</div>
<div class="col-xs-7">{{cost}}</div>
</div>
<div class="row">
<div class="col-xs-5">Total:</div>
<div class="col-xs-7">{{total}}</div>
</div>
So now when you will not have value of your model you will still can see your labels in 1 line.
Demo: http://plnkr.co/edit/kSvv1EjXyB7qhXotNEA7?p=preview
There are two things you can do here. First you should be starting a new row element for each row of data, like this:
<div class="container">
<div class="row">
<div class="col-md-5">Cost:</div>
<div class="col-md-7"></div>
</div>
<div class="row">
<div class="col-md-5">Total:</div>
<div class="col-md-7">{{ total }}</div>
</div>
</div>
The next thing you can do is either add   to your div content
.col-md-5 { background-color: red; }
.col-md-7 { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<h5>Example 1:</h5>
<div class="container">
<div class="row">
<div class="col-md-5">Cost:</div>
<div class="col-md-7"></div>
</div>
<div class="row">
<div class="col-md-5">Total:</div>
<div class="col-md-7">{{ total }}</div>
</div>
</div>
<h5>Example 2:</h5>
<div class="container">
<div class="row">
<div class="col-md-5">Cost:</div>
<div class="col-md-7"> </div>
</div>
<div class="row">
<div class="col-md-5">Total:</div>
<div class="col-md-7">{{ total }}</div>
</div>
</div>
Use span if you want elements to be inline instead of div. Wrap your inline elements inside a div of complete length
<div class="col-md-12">
<span class="col-md-5">Cost:</span>
<span class="col-md-7">{{ cost }}</span>
</div>
<div class ="col-md-12">
<span class="col-md-5">Total:</span>
<span class="col-md-7">{{ total }}</span>
</div>
Demo : http://jsfiddle.net/HB7LU/11572/
P.S : change the value of cost and test it.
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>
Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>
I have the following snippet in my AngularJS app:
<div ng-repeat="proverb in proverbs">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
This will generate a div element with the class col-sm-6 for every proverb in my proverbs array. My intention is to display two columns whenever a screen is big enough.
Despite not using Bootstrap's .row element, the above snippet works exactly as intended.
The question is, how could I include a .row element that would only appear every second iteration of ng-repeat so that I would get the following end result:
<div class="row">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
Also, given that whenever the sum of the spans of .col elements in Bootstrap is greater than 12 the next element gets pushed down, is there even any reason to use the .row class other than to guarantee a new row is generated before all columns are completely filled?
If you don't need the .row then you could do this
<div ng-repeat="proverb in proverbs">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
<ng-show="$index % 2 == 0" br/>
</div>
</div>
</div>
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>
I want to create a paragraph view at my application, where every 5 items display in a block, one under each other, and the next five in the next block;
Example:
<div style="display:inline-block">
<div style="display:inline-block">
<div style="display:block">1.-----</div>
<div style="display:block">2.-----</div>
<div style="display:block">3.-----</div>
<div style="display:block">4.-----</div>
<div style="display:block">5.-----</div>
</div>
<div style="display:inline-block">
<div style="display:block">6.-----</div>
<div style="display:block">7.-----</div>
<div style="display:block">8.-----</div>
<div style="display:block">9.-----</div>
<div style="display:block">10.-----</div>
</div>
</div>
So basically I need to do something ugly like 2 nested iterations, one advancing 5 elements at a time, and the other 1 element at a time.
Or an ng-if directive which is not available at the Angular version that I use.
Technically, you can use one ng-repeat to achieve it (without ng-if). Try something like this:
<div style="display:inline-block" ng-repeat="item in items">
<div style="display:inline-block" ng-show="$index % 5 == 0">
<div style="display:block">{{items[$index+0].content}}</div>
<div style="display:block">{{items[$index+1].content}}</div>
<div style="display:block">{{items[$index+2].content}}</div>
<div style="display:block">{{items[$index+3].content}}</div>
<div style="display:block">{{items[$index+4].content}}</div>
</div>
</div>
Demo: http://jsfiddle.net/kpgbx/