I have an table in HTML with some rows that content information about users.
I can click on each rows.
So, i would like to know must I use ng-hide/ng-show? Is it right way or exists more well solutions in Angular JS?
I mean:
<div class="table" ng-show="details == false">
<div class="row"></div>
</div>
<div class="tableDetails" ng-show="details == true">
<div class="row">Name</div>
<div class="row">Post code</div>
</div>
When I click on <div class="row"></div> from class="table" then this table is hidden and is shown table class="tableDetails". When is loaded table 2, how I can display table 1 when I click button come back?
you can use these ways: ng-class | ng-(show|hide) | ng-if
<div class="table" ng-if="!details">
<div class="row"></div>
</div>
<div class="tableDetails" ng-if="details">
<div class="row">Name</div>
<div class="row">Post code</div>
</div>
Related
I have an array of objects. I want to display two object per row. Something like:
<div class="row" ng-repeat="twoObject in objects>
<div class="col-sm-6">{{twoObject(1).name}}</div>
<div class="col-sm-6">{{twoObject(2).name}}</div>
</div>
As you know here {{towObject(1)}} is not valid code.
How can I achieve this in angularJS?
I have fixed this issue using the following trick:
<div ng-repeat="object in objects">
<div class="row" ng-if="$even">
<div class="col col-6">{{object[$index]}}</div>
<div class="col col-6">{{object[$index + 1]}}</div>
</div>
</div>
This is where I got it: Create Row every after 2 item in Angular ng-repeat - Ionic Grid
I am tring to output <div> in middle of ng-repeat using $index== - however the Banner <div> is within the parent container so its not going accross the full width of the screen. I have tried using the class="container-fluid" on the Banner, but its making it even smaller. Is there any way to break out of the parent container at all (just for that one div, in the middle of the ng-repeat) to make the Banner full width?
This is how I would like it to look (for visual purposes only, need div's to be output using the ng-repeat): Plunker-1
And this is how it currently looks: Plunker-2
Here is the solution : https://plnkr.co/edit/pYO1G8M3jIDXHrRSE4YE?p=preview
You do not need container-fluid to achieve what you intend to.
<div class="col-md-12" id="Banner" ng-if="$index==8">
<div class="well well-sm text-center">
Banner
</div>
</div>
You're close, try this:
<div id="content">
<div class="container" ng-controller="MainController">
<h1>Hello Plunker!</h1>
<div ng-class="$index === 8 ? 'col-md-12' : 'col-md-3'" ng-repeat="item in Data">
<div class="container-fluid" id="Banner" ng-if="$index === 8">
<div class="well well-sm text-center">
Banner
</div>
</div>
<div class="well active" ng-if="$index !== 8">
<h3>{{item}}</h3>
</div>
</div>
</div>
</div>
how about one like this one?
What I've done was to make the .well absolute positioned, so you can "bypass" normal document flow, making the .banner as long as you like, thus adding extra width with percentage values (so you can have it a bit fluid on resizing).
.banner{
position: absolute;
width: 104%;
right: -2%;
}
So, you get your banner wider, more than 100% (which is the container's width). In order to get it in the middle subtract half of extra width (4% / 2 == 2%) from the right (or could add 2% from the left).
Problem is the responsiveness, as it breaks for some breakpoints. I would suggest go with a solution like SASS and CSS3 calc(), MDN, to tackle this one.
<div ng-repeat="item in Data">
<div class="col-md-12 well well-sm text-center"
id="Banner"
ng-if="$index==8">
Banner
</div>
<div class="col-md-3">
<div class="well active">
<h3>{{item}}</h3>
</div>
</div>
</div>
I see during load that the scope element $scope.docDetails has the necessary data.
In the view when I use the ng-repeat to print info, I see that it is not displayed in browser.
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in documentUploadController.docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
WHen i view the HTML ,i see the ng-repeat code being commented out
Where am I going wrong?
Currently, your ng-repeat variable is $scope.docDetails
Since $scope already equals the controller, remove the controller reference in ng-repeat like <div ng-repeat="row in docDetails">
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
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/