I have this piece of code on my HTML that I fill with Angular:
<table id="myTable">
<tr>
<th>Id</th>
<th>desc</th>
<th>prod kg</th>
<th>index</th>
</tr>
<tr ng-repeat="x in maq" ng-if="{{ x.index }}=='0'" id="{{ x.index }}">
<td style="border: 1px solid black;">{{ x.codigo }}</td>
<td style="border: 1px solid black;">{{ x.desc }}</td>
<td style="border: 1px solid black;">{{ x.prod_24_h_kg }}</td>
<td style="border: 1px solid black;">{{ x.index }}</td>
</tr>
</table>
No problem here so far. However I want to make and ng-if for each row as you can see, and let's say:
{{ x.index }}=='0'
I don't want that row to show up. I have tried many combinations of the " " and ' ' with no succes. Does anyone see the solution?
No need to use interpolation {{}} directive inside ng-if directive, It directly takes an expression which will evaluate against current scope.
ng-if="x.index ==0"
Rather another option to achieve same thing would be use filter.
ng-repeat="x in maq | filter: {index: 0} as filterdMaq"
Same filtering thing can happen inside controller which would help to improve performance as well.
$http.get('data.json').then(function(response){
$scope.dataCopy = response.data; //this is original copy of an maq.
//filtered maq
$scope.maq = $filter('filter')(angular.copy($scope.dataCopy), { index: 0}, true);
});
You don't need to use {{ }}. Just print x.index=='0'
Related
This is my code.Am applying css for if condition and removing that css for else condition its working fine.But I dont want to use 2 <tr> within one tr I need to achieve this and I dont want to use inine css.
<tr ng-repeat="data in userList"
ng-if="data.appDate>=delivery.joinedDate"
ng-style="{'background-color': '#ffd6d6','border':'dashed 3px #9e0b0f'}">
<td>{{$index+1}}</td>
<td>{{data.name }}</td>
<td>{{data.age}}</td>
<td>{{data.dept}}</td>
<td>{{data.appDate }}</td>
<td>{{data.joinedDate}}</td>
</tr>
<tr ng-repeat="data in userList" ng-if="!(data.appDate>=delivery.joinedDate)">
<td>{{$index+1}}</td>
<td>{{data.name }}</td>
<td>{{data.age}}</td>
<td>{{data.dept}}</td>
<td>{{data.appDate }}</td>
<td>{{data.joinedDate}}</td>
</tr>
Any suggestion?
You would do this using the ng-class directive. You'll simply add your styling as a class in your stylesheet and change your angular code to this:
<tr ng-repeat="data in userList"
ng-class="{ 'my-css-class': data.appDate>=delivery.joinedDate }">
<td>{{$index+1}}</td>
<td>{{data.name }}</td>
<td>{{data.age}}</td>
<td>{{data.dept}}</td>
<td>{{data.appDate }}</td>
<td>{{data.joinedDate}}</td>
</tr>
Stylesheet:
.my-css-class {
background-color: #ffd6d6;
border: dashed 3px #9e0b0f;
}
Try looking at ngClass.
You can dynamically set css based on a model.
Angularjs ngClass docs
As a note, inline styling is not good practice.
when table inside table repeating dynamically in that time ng-if is not working.when am adding one row in child table in that time taking wrong parent index.am using like that but in input filed working fine but buttons are not working when ng-if condition taking wrong parent index
eg:
<div id="parentdivId" ng-repeat="parent in listOfParentTables">
<table >
<thead class="evlhead ingpopuphead">
<tr>
<th >A</th>
<th >B</th>
<th >C</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="child in parent.childMaster" ng-if="child.status!=2">
<td >
<select id="a10" ng-model="child.a10">
<option ng-repeat="list in listMaster" value={{list.ID}}>{{list.NAME}}</option>
</select>
</td>
<td ><div class="addrembtn" ><input class="btnadd" type="button" value="+" id="addbutton10" ng-click="addNewChildRow($parent.$index,$index)"><input class="btnrem" type="button" value="-" id="deletebutton10" ng-click="removechildRow($parent.$index,$index)"></div></td>
</tr>
</tbody>
</table>
<div style="float:left;">
<button class="parentbtn" style="margin:37px 0px 0px 17px !important;width: 75px;" value="AddTable" id="basebutton" ng-click="addNewParenttable($index)">+ Gasto</button>
</div>
<div style="float:left;">
<button class="parentbtn" style="margin: 12px 0px 0px 17px !important;width: 75px;" value="AddTable" id="basebutton" ng-click="removeParenttable($index)">- Eliminar</button>
</div>
</div>
In a nested ng-repeat, the $index does not give the index of element in the array being iterated. Use something like,
ng-click="addNewChildRow(listOfParentTables.indexOf(parent),parent.childMaster.indexOf(child))"
ng-click="addNewParenttable(listOfParentTables.indexOf(parent))"
indexOf always returns the original index in an ng-repeat
Plunker
Hope it helps!
I am new to angular JS and working on table to have odd/even background colour change however I am facing some challenges.
Here is my code
<!DOCTYPE html>
<html>
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/getCustomer")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Output I am getting is not desirable, the odd country data is coming blank.
Use below code, I think for the column country odd condition is missing
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green"> Country</td></tr>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
<td ng-if="$even">
{{ x.Country }}</td>
</tr>
</table>
You can do it with CSS much more simple and clean code.
table tr:nth-child(odd) td{
//your style
}
table tr:nth-child(even) td{
}
You can also define the basic background color and then just use odd/even.
You can use CSS for background color change.
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(odd) { background-color: #f1f1f1; }
</style>
The reason why your data is not coming properly is that you have used ng-if="$odd" to apply styles for odd columns.
So change your HTML to the following way and add background color from CSS.
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>
<tr ng-repeat="x in names">
<td>
{{ x.Name }}</td>
<td>
{{ x.Name }}</td>
<td>
{{ x.Country }}</td>
</tr>
</table>
I have data in json format, which I would like to display the item on the different data cell based on its first element. If more than one element in the cell, multiple item should be shown separable by "," or .
For example, if my json is:
data = {{"Mon","012"},{"Tue","123"},{"Mon","112"},{"Mon","032"},...}
<table>
<tr>
<td id="Mon"> 012 , 112 , 032 </td>
<td> id="TUe"> 123 </td>
</tr>
</table>
or
<pre>
<table>
<tr>
<td id="Mon"> <div>012</div> <div> 112 </div> <div>032</div> </td>
<td id="TUe"> <div>123</div> </td>
</tr>
</table>
</pre>
I was investigating the doc for ng-repeat with $odd and $index etc., but could not find the right way to get my result.
Your JSON is invalid, so I reformated it a bit to answer the format question.
CSS should do the formatting. You can define a delimiter if there are multiple <span> elements.
td span+span:before {
content: ", ";
}
angular.module('app', [])
.run(function($rootScope) {
$rootScope.dataOrdered = [{
key: "Mon",
values: ["012", "112", "032"]
}, {
key: "Tue",
values: ["123"]
}];
});
table,
th,
td {
border: 1px solid black;
padding: 2px;
}
td span+span:before {
content: ", ";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app">
<tr>
<td ng-repeat="item in dataOrdered" id="{item.id}}"><span ng-repeat="value in item.values" ng-bind="value"></span>
</td>
</tr>
</table>
I have a code like this:
<tr ng-repeat="tagJson in tagList">
<div ng-repeat="(key, value) in tagJson">
<td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{key}}
</td>
<td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{value}}
</td>
</div>
</tr>
where tagList is :
[{a:1},{a:1}]
But the key and value are empty! Not sure why thats the case. If i try to print tagJson in the html like:
{{tagJson}}
it does print:
{a:1}
{a:1}
but key and value doesnt work!
Where I'm making the mistakes?
See here:
http://jsfiddle.net/Vwsej/126/
The actual reason why you don't see anything is, as akonsu posted, because you're producing invalid html.
To keep the values in seperate table cells, you can use ng-repeat-start/end, e.g.:
var MainCtrl = function () {
this.tagList = [{a:1}, {b:2}];
};
angular
.module('app', [])
.controller('Main', MainCtrl)
;
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="Main as main">
<table>
<tr ng-repeat="tagJson in main.tagList">
<td ng-repeat-start="(key, value) in tagJson" width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{key}}
</td>
<td ng-repeat-end width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{value}}
</td>
</tr>
</table>
</div>
You do not see anything because this is invalid markup for the table. You have div elements inside.
maybe this?
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="tagJson in tagList">
<td ng-repeat="(key, value) in tagJson">
{{key}}={{value}}
</td>
</tr>
</table>
</div>
but to emit the markup that you wanted, I think you need a custom directive for that.