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.
Related
I am trying to render a json as a table in a HTML Template using angularjs ng-repeat element. The script file passes the JSON object, but the ng-repeat wont render the contents of JSON.
I followed the steps from this tutorial link.
https://codepen.io/salva341/pen/aYKmvG
html template section where ng-repeat doesn't render properly
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="ttm in records.response" >
<td>{{ttm.name}} </td>
<td>{{ttm.status}} </td>
<td>{{ttm.name}} </td>
<td>{{ttm.name}} </td>
</tr>
</tbody>
</table>
</div>
app.js
angularjs 1.6.6
$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
$scope.records = {"response":response.data}
$scope.parseItem = function(string)
{
var newString = string.replace(/['\']/g,'');
var jsonFormated = JSON.parse(newString);
return jsonFormated.Message;
}
});
Google chrome inspector : Section inspection screenshot
I have used an angularjs add-on inspector for chrome.
It looks like ttm is the array you want to display for. So I believe your ng-repeat should be more like:
<tr ng-repeat="record in ttm" >
<td>{{record.name}} </td>
<td>{{record.status}} </td>
<td>{{record.name}} </td>
<td>{{record.name}} </td>
ttm being the array, and record being a made-up name for each item in that array.
See: https://www.w3schools.com/angular/ng_ng-repeat.asp
As per your code, your are referencing wrong array name in your HTML binding.
Try this
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="item in records.response.ttm" >
<td>{{item.name}} </td>
<td>{{item.status}} </td>
<td>{{item.name}} </td>
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
</div>
Finally I was was able to achieve what I wanted.
I added ng-bind element to display the data on the html template. That is weird. No of the scope variable gets displayed on the html template without ng-bind element. This investigating that is strange this is happening.
I would like to thank #Thaier Alkhateeb for their valuable comment.
Revised code snippet
<tbody ng-repeat="data in records.response ">
<tr ng-repeat="ttm in data">
<td ng-bind="ttm.name"> </td>
<td ng-bind="ttm.appId"> </td>
<td ng-bind="ttm.created"> </td>
<td ng-bind="ttm.status"> </td>
</tr>
</tbody>
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 am having this inside my controller method.
var employee = [{name:"ankur",dept:"IT",company:"wipro",under:[{name1:"ashish"},{name1:"akash"},{name1:"tyagi"},{name1:"mogra"}]}];
$scope.employee = employee;
and this inside html page.
<table>
<tr ng-repeat="emp in employee">
<td>{{emp.name}}</td>
<td>{{emp.dept}}</td>
<td>{{emp.company}}</td>
<td ng-repeat="(key , value) in emp.under">
a<td>{{key}}</td>
b<td>{{value}}</td>
</td>
</tr>
</table>
However, first ng-repeat is working fine, but it shows nothing at place of nested ng-repeat.
Your ng-repeat is fine, The problem is with the td inside another td, to do that you can do like this instead :
Fiddle
<div ng-app='app' ng-controller='mainCtrl'>
<table>
<tr ng-repeat="emp in employee">
<td>{{emp.name}}</td>
<td>{{emp.dept}}</td>
<td>{{emp.company}}</td>
<td ng-repeat="(key , value) in emp.under">{{value.name1}}
<table>
<tr>
a<td>{{key}}</td>
b<td>{{value.name1}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
If you just want to check if your ng-repeat is working, remove the <td>'s and check like this :
<td ng-repeat="(key , value) in emp.under">
a{{key}}
b{{value}}
</td>
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
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>