I have something like that:
<div ng-repeat="element in data.arrayElement">
<strong>{{element.name}}</strong>
</div>
The previuos collection have 5 elements. Can i iterate the collection except the element that has the value 2?. I don't know, maybe like this
<div ng-repeat="element in data.arrayElement | filter:element.val() !== 2">
<strong>{{element.name}}</strong>
</div>
use ngIf because the
ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property.
<div ng-repeat="element in data.arrayElement" ng-if="element.val !== 2">
Just use a ng-hide on that value:
<div ng-repeat="element in data.arrayElement" ng-hide="element.val == 2">
collect
$scope.data = [
{name:'John', value:'1'},
{name:'Mike', value:'2'},
{name:'Alex', value:'3'}
];
html
<div ng-repeat="element in data | filter:{value:'!2'}">
<strong>{{element.name}}</strong>
</div>
Related
I am looking for the first index the passes through my ng-if condition which is not always $index === 0, and cant be solved using $first.
Here's my code sample:
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item" ng-class="{'active': $index === $first}"></div>
</div>
I want to add a class in the first occurrence of item.
You don't have to check if $index is $first in:
<div class="title item" ng-class="{'active': $index === $first}">
Change it to:
<div class="title item" ng-class="{'active': $first}">
Why not do this via css?
Assuming "ticket -event" is a spelling mistake, and it should be "ticket-event", the css is straightforward:
.ticket-event div:first-child { // css here }
Here is what you need to do:
<div class="title item" ng-class='{active:$first}'></div>
<tr ng-class="{evaluationRow : $index==0 && item.HighlightBorder==true }" ng-repeat="item in items" >
<td>{{item.LearnerId}} </td>
<td>{{item.Name}}</td>
This has worked for me. Here I'm setting Css class for first element in ng-repeat only if a condition holds true otherwise 'No' Css class is applied.
In above example, "evaluationRow" is the name of Css class to apply, followed by a condition.
You can make use of $first
It will evaluate to true for the first element in ng-repeat
So your code should be
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item {{$first?'active':'someotherclass'}}"></div>
</div>
This worked for me
<div class="title item" ng-class='{active:$first}'></div>
I'm a freshman to AngularJS. I try to modify the item's style using AngularJS, but I meet this bug:
when I select another item, the background of the first item is still blue. How to change my code to fix this?
Here is my plnkr.
And here is the code.
<div ng-init="selectedNode = false">
<div ng-repeat="item in items" ng-click="selectedNode=true" ng-class="{selected: selectedNode == true}">{{item.value}}</div>
</div>
When I click on 2 after click on 1, the background color of 1 should be removed. It means only one item should be selected. How to slove this problem?
The problem is subtle -- ng-repeat creates a new isolated scope for each of its entries. So when your click handler sets selectNode to true, it happens on its own scope, and not its parent.
Easily remedied. (I surrounded your example with some mock data -- I'm sure you have your own):
<div ng-app ng-init="items = [{value: 'red'},
{value: 'green'},{value: 'blue'},{value: 'yellow'},
{value: 'orange'}]">
<div ng-init="selection = { selectedNode: null }">
<div ng-repeat="item in items"
ng-click="selection.selectedNode = item"
ng-class="{selected: selection.selectedNode == item}">
{{item.value}}
</div>
</div>
</div>
https://jsfiddle.net/kfnkn827/
First, I create an object in the parent scope that can be modified by the children. Notice that instead of a boolean, I just use a reference in the parent. This relieves you from storing a bunch of flags.
Edit: I saw your Plinkr after submitting. Sorry! :-P
A couple things. Don't use ng-init to init the variable, do it in a controller. Second, ng-repeat creates a child scope, so you should make a data model for this, so data.selectedNode. Then just set the selectedNode to the currently repeated item, and then style it if the selectedNode equals the current item.
<div ng-init="data.selectedNode ={}"> <!-- do this in a controller, not ng-init -->
<div ng-repeat="item in items" ng-click="data.selectedNode=item" ng-class="{selected: data.selectedNode == item}">{{item.value}}</div>
</div>
Please try out bellow code.
if click on row, bind clicked item value in selectedNode variable and apply active-row class.
<style>
.active-row{
background-color: #D4D0D0;
}
</style>
<div ng-init="selectedNode = false">
<div ng-repeat="item in items" ng-click="selectedNode=item.value" ng-class="(selectedNode == item.value) ? 'active-row' : ''">{{item.value}}</div>
<br />
</div>
I have two columns both containing items from the same array. I want to achieve the masonry effect since the height of each .tile will be different.
<div class="col-md-6">
<div class="tile" ng-repeat="item in items| orderBy: 'id'" ng-if="$odd">
<button ng-click="alert($index)"></button>
</div>
</div>
<div class="col-md-6">
<div class="tile" ng-repeat="item in items| orderBy: 'id'" ng-if="$even">
<button ng-click="alert($index)"></button>
</div>
</div>
Will Angular do the odd-even alternation on the sorted array or the way elements are stored in the array?
Angular is going to alternate on the way the elements are stored in the array. If you want to organize the array I would use .sort() before assigning to Angular $scope.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Based on the trying the code below, it seems that Angular does apply $odd and $even after sorting based on the orderBy filter. However, this would only work correctly in a single ng-repeat directive. I would modify your code to look like the following:
angular.module("myApp", [])
.controller("ItemController", function($scope) {
$scope.items = [{
id: 50
}, {
id: 1
}, {
id: 2
}, {
id: 5
}, {
id: 3
}];
$scope.alert = function(idx) {
console.log(idx);
};
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="col-md-6" ng-controller="ItemController">
<div class="tile" ng-repeat="item in items| orderBy: 'id'">
<button class="btn btn-danger" ng-if="$odd" ng-click="alert($index)">{{item.id}}</button>
<button class="btn btn-success" ng-if="$even" ng-click="alert($index)">{{item.id}}</button>
</div>
</div>
</body>
In other words, you should apply the ng-if directive to the element inside your ng-repeat directive. Depending on what exactly you want to alternate, it might be simpler to use ng-class or another directive that allows you to specify conditional attributes.
The Angular orderBy filter returns a copy of the source array. The ng-repeat is applied to the copy.
Your example case will work, but it will create twice as many $watch elements, and you might experience odd flickering of the data shifting back and forth between columns if the number of rows changes. Also, because arrays are 0 based, your rows will be backwards.
I'm trying to acheive the same behavior as the spring code below:
<c:forEach items="${data}" var="data" varStatus="contador">
<c:if test="${(contador.count-1)%3==0}">
<div class="conjunto-${conjunto} row"> <!-- Show opening div -->
</c:if>
<!-- Some HTML goes here -->
<c:if test="${((contador.count-1)%3==2)}">
</div>
</c:if>
</c:forEach>
Explaining: I want a new div from class row only after 3 other HTML elements have been added.
I have tried this with ng-if, like this:
<div ng-repeat="data in DATA">
<div class="conjunto-{{$index/3}} row" ng-show="$index % 3 == 0" ng-include="'html.html'">
</div>
<div ng-show="$index % 3 != 0" ng-include="'html.html'">
</div>
</div>
But it obviously doesnt work because only one element with be inside de div.row.
Is there an if-clause with which I could add only the opening div and then close it later?
Thanks in advance.
Ok the best way to do this IMO is 2 fold, in your controller have a method similar to this
$scope.createDataChunks = function() {
var a = $scope.DATA,
retArr = [];
while(a.length) {
retArr.push(a.splice(0,3));
}
return retArr;
}
This would give you an array of arrays, each containing 3 (or less) items in it, you then have this as your markup
<div ng-repeat="data in createDataChunks()">
<div class="conjunto-{{$index/3}} row" ng-show="$index % 3 == 0" ng-include="'html.html'">
<!-- put custom HTML here -->
</div>
</div>
I think that's roughly what you are after?
I'm fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.
HTML:
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
Item
</div>
</div>
My Directive:
scope.$apply(function () {
scope.$parent.showItem(index);
});
Controller:
$scope.teamDrop = function(index) {
$scope.hidden[index] = false;
};
You can use the ng-show and ng-hide directives to hide and show elements.
You can also use the ng-if directive to remove elements from the dom.
For your example I'd change your ng-class to an ng-hide
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-hide="hidden[$index]">
Item
</div>
</div>
You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.