I'd like to show element only one time within ng-repeat.
My code bellow doesn't work because "Event of today" is shown each time when an event is starting today...
My code :
<div class="line" ng-repeat="event in events">
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === today.getTime()">Event of today</h4>
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === tomarrow.getTime()">Event of tomarrow</h4>
<div class="event-body">
<h3>{{event.categoryName}} : {{event.title}}</h3>
</div>
</div>
Just create a filtered version of the events array and display that. You can make a function that refilters it, and call that whenever there's a change that needs it to update (putting it in a $scope.$watch function seems the easiest way to do this). It seems low-tech, but it really gives you the most control over what you end up seeing.
Here is a very stripped-down Plunker of this, just showing some simple filtering: Example.
Related
I am relatively new to angularJs so I am trying to learn how to do different things. I have been trying to make solutionName act as a p tag if there is no URL input for solutionUrl1, at the moment solutionName is acting as if it is hyperlinked even when its not. Any help would be appreciated.
<a ng-href="{{::data.solutionUrl1}}" class="card__title" style="text-align: center">
<span>{{::data.solutionName}}</span>
</a>
Use ng-if of angularjs to render either one or the other:
Something like this, you most probably have to change the condition to meet your needs. You can also create a new Variable in the JS files like showLink and set this variable to true/false depending on some conditions. And then just use this boolean variable to show/hide the link with the method outlined below:
<div ng-if="data.solutionUrl1">
<!-- code to render the link-->
</div>
<div ng-if="!data.solutionUrl1">
<!-- code to render just the span without the link -->
</div>
I have the following angular-List (reduced the content to make it better readable):
<div ng-repeat="element in bigBlock.Elements track by $index"
class="singleBlockElement"
ng-drop="dragSource=='Block'"
ng-drop-success="To($index, $data, bigBlock)">
<div class="bbRange"> </div>
<i class="fa {{GetImage(element)}}" />
<div ng-drag="element.ElementType!=='placeholder'"
ng-drag-data="element"
ng-drag-start="Start()"
ng-drag-success="From(element,bigBlock, $index, bigBlock.$index)"
ng-drag-stop="Stop(element, bigBlock, $index, bigBlock.$index)"
class="cutOff">
{{element.Title}}
</div>
<div class="edit ng-show="GetLinkText(element, true)">
<span class="isvisible">
<i title="{{element.Present?'Präsentieren':'Nicht präsentieren'}}" class="fa fa-{{element.Present?'eye':'eye-slash'}}"></i>
</span>
{{GetLinkText(element,true)}}
</div>
</div>
This is how it looks like:
This is while dragging:
And this is how it looks like when I simply don't drop like described below:
I can now (successfully) drag & drop the two elements ("Welcome" and "Go Away") inside that block changing the order of these two.
But if I abort the drag/drop. e.g. Dragging "Welcome" and not moving it downwards or moving it to an area where I cannot drop (outside the block) the text "Welcome" disappears.
There are no errors. The drop is just not happing (as expected), but Angular seems to be unable to redisplay the text of that element. ({{element.Title}})
I event tried forcing a refresh using $apply(), but this did not change a thing (not creating an error either).
However, if I do ANYTHING on the page like clicking on an edit-button or anything else that causes an event, the date is correctly shown again.
So it looks like a refresh issue for me.
I am using ngDraggable for this (https://github.com/fatlinesofcode/ngDraggable)
(Update: Analyzing the page source in Developer Console of Chrome the text still seems to be there and even "should" be visible (display:block), so this might be more of a browser-issue (chrome) than an angular-issue)
This seems to be a pure Browser/CSS-Issue and not an Angular-Issue. I solved this by forcing the browser to refresh the parent container:
$('.mm-Right')[0].style.display = 'none';
$('.mm-Right')[0].offsetHeight;
$('.mm-Right')[0].style.display = 'block';
where my structure is
<div class='mm-Right'>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
</div>
That did solve the problem but looks like cheating for me. I would prefer that this bug not even appears instead of hiding the symptoms. So I am happy to accept any better answer for that problem.
<div ng-repeat="item in CategorizedItems"
ng-if="CategorizedItems.length> 0"
class="row customRow itemBorder animated slideInLeft" >
{{item.name}}
</div>
I show the list of items in above div.
On click of a button, CategorizedItems are updated.
i.e
$scope.CategorySelected=function(categoryName){
$rootScope.CategorizedItems =[];
$rootScope.CategorizedItems = $rootScope.Items.filter(function(obj){
if(obj.category.name === categoryName)
return obj
});
}
This method is called.Now, when I go from one class to another, New items appear gracefully but items from previous category appear under the list of new items for a couple of seconds.
This is a common problem in Angular.
Most people do this ...
<div ng-if="false">
don't display me
</div>
and then at end of HTML ...
<script src=".....angular.min.js">
and expect the DIV to not appear. Of course it will initially appear in this scenario since it has no idea what ng-if means UNTIL angular is loaded.
Put your angular script include at top of page.
You may also wish to consider using ngCloak directive or CSS class, which is the documented way of resolving this issue (assuming script tag is at top of page).
If I have real problems with this then I might use $scope.readyToRender boolean variable in my controller to control when to display elements.
e.g. at end of controller code I would set it to true and wrap code in an ng-if='readyToRender'
I'm trying to make the sort functionality work by creating two buttons: relevance and date.
I've set it up the following way:
<div ng-init="sort=false">
<a ng-click="sort=true">Date</a>
<a ng-click="sort=false">Relevance</a>
then on the container with the results:
<div eui-sort="ejs.Sort('post_date').order('desc')" eui-enabled="sort" >
The value set with ng-init properly affects the initial sort order and when I click date the list sorts as intended, but when I click relevance the list does not re-sort back as if eui-enabled was set to false.
I'm guessing underformed knowledge of Angular is causing me to oversimplify this. Any advice?
I suspect you're running into the AngularJS dot-problem, i.e.: the sort. A way to circumvent this is modifying sorting.sort within the eui-sort scope:
<div eui-sort="ejs.Sort('post_date').order('desc')" eui-enabled="true">
<a ng-click="sorting.enabled=true">Date</a>
<a ng-click="sorting.enabled=false">Relevance</a>
</div>
In this example, eui-enabled is only used for initialization since the value (true) doesn't change. Note that to reference the "sorting: object you must be inside the scope of the eui-sort (i.e.: inside the div)
I am running this simple code with angularjs :
HTML :
<div ng-app ng-controller="AController">
<code>{{ itemsInArray }}</code>
<div ng-repeat="item in itemsInArray">
<input ng-model="itemsInArray[$index]" />
</div>
</div>
JavaScript :
function AController($scope) {
$scope.itemsInArray = ["strA", "strB", "strC"];
}
Binding appears to be working correctly when indexing into the array but after entering one character the input loses focus.
You can find the working code here on this fiddle : http://jsfiddle.net/QygW8/
I think this is happening because you are manipulating the same item which is iterated over ng-repeat. So ng-repeat sees a change in the item and re-runs the `ng-repeat which regenerates the items.
If you look at your fiddle html, you may notice this effect.
To make it work, one way you can do this
http://jsfiddle.net/cmyworld/CvLBS/
where you change your array to object array
$scope.itemsInArray = [{data:"strA"}, {data:"strB"}, {data:"strC"}];
and then bind to item.data
Try to change the model:
<div ng-repeat="item in itemsInArray">
<input ng-model="item" />
</div>
Even am an newbie to the angularjs, up-to my findings ng-repeat updates/repeats and recreates the whole HTML elements when there is an change in the model. Hence when a single character added to model causes ng-repeat to react and creates the all the HTML elements again which results to losing the focus.
This is an fiddle , In which u will be able to observer the changes with the model inside the ng-repeat and outside the ng-repeat.
Sorry i don't have the solution, Hope using ng-change apart of ng-model may help.