What I'm trying to do is to conditionally change what is displayed within a td column block, based on some value of my ng-repeat's iterated object value. More specifically, if you look at the code below, what I want to do, is based on some value of data.col2val, I want to change what is displayed in column2 for that row.
I know that there is no such thing as a ng-if-else, but if there was, my code might look something like this:
<table class="table" id="myTable">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody ng-repeat="data in dataStore">
<tr>
<td>{{data.col1val}}</td>
<td ng-if="{{data.col2val}}='something'" style="somestyle">something</td>
<td ng-if-else="{{data.col2val}}='somethingelse'" style="someotherstyle">somethingelse</td>
</tr>
</tbody>
</table>
Maybe there is a trivial way to do this, but I can't seem to figure/google it out. I know how do to this what ASP.NET/Razor but not with Angular, so any assistance is appreciated and pardon my ignorance.
ng-if="data.col2val=='something'"
you don't have tu use curly braces inside ng-if directive
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope){
$scope.dataStore = [
{col1val:"Mike", col2val:"something"},
{col1val:"Mike", col2val:"somethingelse"},
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<table class="table" id="myTable">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody ng-repeat="data in dataStore">
<tr>
<td>{{data.col1val}}</td>
<td ng-if="data.col2val=='something'" style="somestyle">something</td>
<td ng-if="data.col2val=='somethingelse'" style="someotherstyle">somethingelse</td>
</tr>
</tbody>
</table>
</div>
</body>
Related
myCtrl.Data.summary.account
if i print above model i get the output like below
["1","2","3","4","5"]
i want to use ng-repeat on this value, how to achive this?
I tried following code snippet using ng-repeat but it's not printing anything
<td ng-repeat="data in myCtrl.Data.summary.account">
<tr>{{data}}</tr>
</td>
What mistake i made here? can anyone please point out this issue. How to fix this?
it is ng-repeat not ng-repet
<td ng-repeat="data in myCtrl.Data.summary.account">
<tr>{{data}}</tr>
</td>
1) Use ng-repeat instead of ng-repet
2) If you are using controllerAs syntax check if myCtrl is correct controller name in controllerAs value
3) If you are using $scope then you should create $scope.myCtrl.Data.summary.account in controller
You should place the value in the columns and repeat for the rows. Your code should be in this format:
<tr ng-repeat="data in myCtrl.Data.summary.account">
<td>{{data}}</td>
</tr>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = ["1","2","3","4","5"]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
<td ng-repeat="data in arr">
<table>
<tr>
<td >{{data}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
cant use directly <tr>inside <td> . you need to create a table and add it there
<td ng-repeat="data in myCtrl.Data.summary.account">
<table>
<tr>
<td>{{data}}
</td>
</tr>
</table>
</td>
I have an API which return me a JSON array:
{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}
How can I make a table in angular, so the data is displayed correctly?
Currently I have this:
My html code is:
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{x.results}}</td>
</tr>
</tbody>
</table>
Can you help me fix the last column, so instead of displaying all the values in one row, make it display it into different rows?
I believe this might be closer to what Angel Silva is after.
HTML:
<body ng-controller="MainCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody ng-repeat="x in data">
<tr ng-repeat="r in x.results">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{r}}</td>
</tr>
</tbody>
</table>
</body>
JavaScript/AngularJS:
app.controller('MainCtrl', function($scope) {
$scope.data = [{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}];
});
Here's a link to a working Plunker, http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview
Use a second ng-repeat within an <ul> (unordered list):
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>
<ul>
<li ng-repeat="r in x.results">
{{ r }}
</li>
</ul>
</td>
</tr>
</tbody>
</table>
You could create an array of columns which could be named as columns. Loop over columns to render td's data with current x
Controller
$scope.data = {"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]};
$scope.columns = Object.key($scope.data)
Markup
<tr ng-repeat="x in data">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
You can try array.join() method to join all the elements of an array into a string.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.tableR = true;
$scope.data = [{
"i":11,
"j":12,
"iterationNumber":9,
"results":[12,6,3,10,5,16,8,4,2,1]
}];
});
tr,th,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{x.results.join()}}</td>
</tr>
</tbody>
</table>
</div>
I have a table with ng-repeat:
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody ng-repeat = "i in data">
<td>{{i.key}}</td>
<td>{{i.value}}</td>
</tbody>
</table>
The table is populated with data-ng-init, when the user clicks on a button:
<button ng-click="getNewVals()">new values</button>
I get json with new key-value, my question is how to repopulate the table with the new values baes on the key? is there a angular way to do so?
ng-repeat is bound to the model you are iterating over. If you update the model, ng-repeat will re-draw. In your example, whenever $scope.data changes, the ng-repeat will update itself.
Use this way. It's good if you provide your JSON.
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody>
<tr ng-repeat = "(key, val) in data">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
Look at the following example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in persons">{{x.name}}, {{x.age}}</li>
</ul>
<button ng-click="changeIt()">Change json</button>
<script>
//1 module declaration
var app = angular.module('myApp', []);
//2 controller declaration
app.controller('myCtrl',function($scope){
$scope.persons = [
{name:"Peter", "age": 23},
{name:"Lina","age":26},
{name:"Robert", "age":33}
];
$scope.changeIt = function(){
$scope.persons = [
{name:"Larry",age: 59},
{name:"Joseph", age: 63},
{name:"Clara", age:71}
];
}
});
</script>
</body>
</html>
Hope it solves your problem.
you writing ng-reapet instead of ng-repeat
try this.
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody ng-repeat = "i in data">
<td>{{i.key}}</td>
<td>{{i.value}}</td>
</tbody>
</table>
<button ng-click="data.push({'key':1,'value':2})">new values</button>
I have created a dynamic table using ngtable , and table data for 3 columns is fetched from json.In that table for 4th column a green/red color circle should come based on connection if successful or not.
The same i have done with javascript(without using json) in which for that 4th column i have set the four different id's,and based on id's i have changed the color using ajax if connection is successful.
In angular using json i m unable to do so , I have created the dynamic table but how to set id's and from where to get the image i'm unable to do.Can anyone help on this.
<table ng-table>
<thead>
<tr>
<th>Feature</th>
<th>DaysUp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>
</table>
You can use scope id and index value to generate unique id. As ng-repeat creates child scope so you will get one scope id(unique id of scope) that id you can attach with $index.
<tr ng-repeat="user in users" id="{{$parent.$id+'-'+$index}}">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
JSFiddle Demo
HTML:
<div ng-app="myapp" ng-controller="myctrl">
<table>
<thead>
<tr>
<td>Name</td>
<td>DaysUp</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.daysup}}</td>
<td><img width="20px" height="20px" ng-src="{{imageurls[user.status-1]}}" /> </td>
</tr>
</tbody>
</table>
</div>
SCript:
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.users =[
{'name':'xyz','daysup':2,'status':1},
{'name':'abc','daysup':4,'status':2},
{'name':'klm','daysup':6,'status':3},
{'name':'yrt','daysup':9,'status':4}
];
$scope.imageurls = [
'http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_yellow_circle.png',
'http://pix.iemoji.com/sbemojix2/0702.png',
'http://clker.com/cliparts/u/g/F/R/X/9/green-circle-md.png',
'http://pix.iemoji.com/sbemojix2/0701.png'
];
});
Plunker Demo
I'm not sure how to do this in angular, after coming from jquery.
I have a table:
<div class="col-xs-10">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody ng-repeat="val in data">
<tr>
<td>val.Time</td>
<td>val.Distance</td>
<td ng-click="callmethod()"><img src="delete"></td>
</tr>
</tbody>
</table>
</div>
Essentially I want the callmethod() to know which row is being clicked so that I can make a update in the model in my controller. What is the right way to do this?
You can use the $index property:
callmethod($index)
Then on your controller you would do something like:
function callmethod(index) {
var foo = $scope.data[index];
}
Change that ng-click to this:
<td ng-click="callmethod(val)"><img src="delete"></td>
You'll get the whole val object when that method gets called.