I have simple question but i can't find answer so many hours...
I would like to make something like google search. If it's empty then only one styled input box is on center of the screen, but when typing some text inside, div with filtered ng-repeat is shown, and input is on the top of the page. That input is also filter.
It looks something like this, and that works, but i can't figure out how to change style of div that is parrent to input, based on input value, or more precisely if it is empty or not.
Also any more elegant solution to this would be appreciated.
<div ng-class="header">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-switch on="query">
<div ng-switch-when="">
</div>
<div ng-switch-default>
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
Just use ng-show, ng-hide.
<div ng-class="{HeaderNoInput: query=='', HeaderHasInput: query!=''}">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-hide="query">Nothing to list.</div>
<div ng-show="query">
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
Related
I struggle with very basic Angular stuff.
And I don't know exactly, what to search for.
Like this one:
<div ng-repeat="i in [1,2,3]">
{{i}}
</div>
<hr/>
The output is (as expected): <div>1</div>...<div>3</div><hr/>
What I actually want is: <div>1</div><hr/> <div>2</div><hr/> <div>3</div> (no hr after 3)
So like: 1 | 2 | 3
How can I do that?
Please note: No hr after the last div.
Please note: I cannot put the hr-tag into the div.
You just have to create a parent div wrapping the div and hr and also to hide the last hr, use a comparison check with $last
<div ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr ng-if="!$last" />
</div>
As #Vivz answered you can just wrap it in a parent div. If for some reason you cannot however, you can use the ng-repeat-start and ng-repeat-end directive:
<div ng-repeat-start="i in [1,2,3]">
{{i}}
</div>
<hr ng-repeat-end ng-if="!$last" />
You can put your ng-repeat at a level higher. For example:
<span ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr/>
</span>
The result will be:
<span>
<div>1</div>
<hr/>
</span>
<span>
<div>2</div>
<hr/>
</span>
<span>
<div>3</div>
<hr/>
</span>
Note: I used a span for the parenet, but you can use another HTML element, such as a div.
nr-repeat is directive in angular which can can used with html element or itself as a tag
<ng-repeat ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr ng-if="!$last" />
</ng-repeat>
I have this code in my html file and all the values from the ng-repeat are correct and shown the way I want. I have some angular directives such as ng-if, ng-blur and ng-model, but none of them are working. I don't have a clue of what can it be.
<div ng-if="view===true">
<div class="serie_list">
<div ng-repeat="serie in series | filter: { id:id_serie }"
collection-item-width="'100%'"
collection-item-height="100">
<div class="row">
<div class="col col-33">
<img class="img_item" imagenie="{{url}}/exercicios/{{serie.id_exercicio}}-0.gif" width="100%" height="100%"/>
</div>
<span class="col col-67">
<h3>{{serie.descricao_ex}}</h3>
<p><span ng-if="serie.tipo_repeticao">{{serie.tipo_repeticao}}: </span><span ng-if="serie.num_repeticao">{{serie.num_repeticao}}</span></p>
<p ng-if="serie.intervalo"><span>Intervalo: </span><span>{{serie.intervalo}}s</span> <span class="info_icon" ng-click="timer()"><i class="ion-ios-timer-outline"></i></span></p>
<p>Carga: <input type="text" ng-model="serie.carga" ng-blur="salvar(serie.id_exercicio_serie,serie.carga)"/></p>
<p ng-if="serie.nota"><span>Nota: </span><span>{{serie.nota}}</span></p>
</span>
</div>
</div>
</div>
</div>
Thank you
I have a ng-repeat in my page for rendering all my blog posts, which is working fine. What i'd like to have is that on the first iteration in the repeat to also render some random text that will be next to the first of my posts. As it currently stands the random text is rendered next to all the posts. Is there a way to render it only on the first one?
<div ng-repeat="post in blogs | orderBy:post.timestamp:true">
<div class='row'>
<div class='col-md-4 col-xs-12'>
<h4> Welcome to my blog </h4>
<p> Some random text here </p>
</div>
<div class='col-md-8 col-xs-0'>
</div>
<div class="col-md-4 col-xs-0">
</div>
<div class="col-md-6 col-xs-12 post-{{post.id}} blog-posts-teaser" ng-class="{'lastBlogPost': $last}">
<h4><a ng-href="#/blog/{{returnBlogUrl(post.title)}}" class='blog-title'>{{post.title}}</a></h4>
<p>{{post.content | wordLimit:true:200:'...'}}</p>
<p><a class='read-more' ng-href="#/blog/{{returnBlogUrl(post.title)}}" >Read more →</a></p>
</div>
<div class="col-md-2 col-xs-0">
</div>
</div>
</div>
You can use $first the same way that you're using $last.
<p ng-if='$first'> Some random text here </p>
Use $first inside the ng-repeat-ed block. This variable is set to true in case of the first item of the collection.
Documentation
$first - boolean - true if the repeated element is first in the iterator.
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 currently have two rows with 2 SPAN on each one.
What I'd like to do is replace these hardcoded DIV and SPAN with an ng-repeat directive.
My problem is either my 4 SPAN go over 4 rows or they all go on the same one.
Is this feasible with Angular.js?
I read stuff on ng-repeat-start and ng-repeat-end but I'm not sure this could help me here.
Here's a Plunker for you: http://plnkr.co/edit/DEf2JSTFDBvDXusJDsX7?p=preview
Thanks!
EDIT:
I used SPAN in my Plunker example for the sake of simplicity but in my real world problem, I'm using a bootstrap grid and I have, in fact, 2 <div class="col-xs-12 col-md-3"> in each <div class="row">. I hope that clarifies things enough.
Very simple with bootstrap:
<div class="row">
<div class="col-xs-6" ng-repeat="i in [1,2,3,4]">
{{i}}
</div>
</div>
You can even set the width of the wrapper div, if you do not want it to be 100%.
Plunker: http://plnkr.co/edit/J0bKs0BeGW7ltqtnQbNC?p=preview
It is better to use $even and $odd property of ng-repeat.
<div class="row">
<span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
<br ng-if="$odd">
</span>
</div>
OR,
<div class="row">
<span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
<br ng-if="$index%2===1">
</span>
</div>
Not nice but works
<div class="row" ng-repeat="i in [1,2,3,4]" ng-if="$even"><span>{{i}}</span><span>{{i+1}}</span></div>
Solution depends on what u want achieve
Another option is to organize your data not in flat array but as array of arrays
[
[1,2],
[3,4],
[5],
]
And make ng-repeat in ng-repeat
<div class="row" ng-repeat="i in myArray">
<span ng-repeat="j in i">{{j}}</span>
</div>
If your html looks like:
<div class="row">
<div class="col-md-3 col-xs-12">
<span>1</span>
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-12">
<span>3</span>
<span>4</span>
</div>
</div>
Then you can consider doing this with ng-repeat[no <br> needed]
<div class="row">
<div class="col-md-3 col-xs-12" ng-repeat="i in [1,3]">
<span >{{i}}</span>
<span >{{i+1}}</span>
</div>
</div>
Hope it solves your purpose.