We Keep Coding

how to reload the dynamic table every 1 second in the controller in angular js?

I'm fetching data from api and populating in the table i need to relaod the table only in every 1 second , i tried using $timeout but im getting error saying -
$scope.tableParams.reload();//TypeError: Cannot read property 'reload' of undefined
code
<div align="center">
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-table="tableParams">
<tr>
<td>device id</td>
<td>device unique id</td>
<td>access status</td>
<td>current time</td>
</tr>
<tr>
<td>{{ access.id }}</td>
<td>{{ access.devid }}</td>
<td><img ng-src="{{statusValues[access.status]}}" /></td>
<td>{{ access.CurrentTime }}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $timeout) {
$http.get("http://example.com/get")
$scope.reloadTable = function () {
$timeout(function () {
$scope.tableParams.settings().$scope = $scope;
$scope.tableParams.reload();
$scope.reloadTable();
}, 1000)
};
$scope.reloadTable();
});
</script>

Hi Your trying to reload the params using reload method, but it seems that reload() method is working with $route concept to update the url, based on params.
and insted of $timeout , try with $interval,
I've done some modification here, Plesae take a look and This may helpful
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $interval) {
$scope.fn = function(){
$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(data){
console.log(data.data)
$scope.Tdata = data.data;
})
}
$interval(function () {
$scope.fn()
}, 1000)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="customersCtrl">
<div align="center">
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-table="tableParams">
<tr>
<td>device id</td>
<td>device unique id</td>
<td>access status</td>
<td>current time</td>
</tr>
<tr ng-repeat="d in Tdata">
<td>{{ d.id }}</td>
<td>{{ d.title }}</td>
<td><img ng-src="{{}}" /></td>
<td>{{ d.body }}</td>
</tr>
</table>
</div>
</div>
</div>

just add the following code line into my code after tableParams instance creation.
$scope.tableParams.settings().$scope = $scope;

<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $timeout, $interval) {
getData = function(){
$http.get("http://example.com/get")
.success(function(data) {
$scope.tableParams.settings().$scope = $scope;
$scope.reloadTable();
})
.error(function(data, status) {
console.error(status);
})
}
$interval(function (){
getData();
}, 1000);
</script>

Angularjs - How can i show my Json that the element retrieve from 2 array?

I'm trying to show the value of my Json element,
"Baru20151","Lama20151","Baru20152","Lama20152",
but i have no idea how to.
The element is retrieve from 2 array,
in "Baru20151" elements, "20151" is retrieved from "isimasa" array in my Json file.
HTML :
<div ng-app="myApp" ng-controller="RegistrationCtrl">
<h4 style="text-align:center">REGISTRASI MAHASISWA PENDAS</h4>
<table class="table table-striped table-bordered table-hover">
<tr>
<td ng-repeat-start="Isimasa in myDataIsimasa" align="center">Baru</td>
<td align="center">Lama</td>
</tr>
<tr ng-repeat="Pendas in DataPendas" >
<td ng-repeat-start="Isimasa in DataIsimasa" align="center">{{Pendas.Baru{{Isimasa.masa}}}}</td>
<td align="center">{{Pendas.Lama{{Isimasa.masa}}}}</td>
</tr>
</table>
</div>
Controller:
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
$scope.DataPendas = response.data.pendas;
$scope.DataIsimasa = response.data.isimasa;
$scope.Data = response.data;
});
});
</script>
Json :
{"name":"ACEH",
"isimasa":[{"masa":"20151"},{"masa":"20152"}],
"column":9,
"pendas":[
{"kode":"121","prodiname":"PGPAUD", "Baru20151":22,"Lama20151":0,
"Baru20152":22,"Lama20152":20}
]}

Try this..
Controller:
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
$scope.DataPendas = response.data.pendas;
//console.log($scope.DataPendas);
$scope.DataIsimasa = response.data.isimasa;
var isimasa = $scope.DataIsimasa;
console.log(isimasa);
$scope.Data = response.data;
$scope.constructJson = constructJson;
function constructJson(theKey, jsonKey, jsonObj){
console.log(theKey, jsonKey);
var newKey = theKey + jsonKey;
var newValue = jsonObj[newKey];
console.log(newValue);
return newValue;
}
});
});
</script>
HTML:
<div ng-app="myApp" ng-controller="RegistrationCtrl">
REGISTRASI MAHASISWA PENDAS
<table class="table table-striped table-bordered table-hover">
<tr ng-repeat-start="Isimasa in DataIsimasa">
<td>{{Isimasa.masa}}
<div ng-repeat="Pendas in DataPendas">
Baru{{Isimasa.masa}} : {{ constructJson("Baru",Isimasa.masa, Pendas ) }}<br/>
Lama{{Isimasa.masa}} : {{ constructJson("Lama",Isimasa.masa, Pendas ) }}
</div>
</td>
</tr>
<tr ng-repeat-end>
</tr>
</table>

AngularJS dynamic row generation with HTML formatting

I am using ng-repeat to generate table rows on HTML. I have HTML tags inside my row content that I want to format the content with.But it will only print the text with html tags as plain text without identifying them as HTML tags.
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td>{{styleRowDetail.shortMessage}}
</td>
<td>{{styleRowDetail.classOriginated}}
</td>
<td>{{styleRowDetail.method}}
</td>
<td>{{styleRowDetail.lineRange}}
</td>
<td>{{styleRowDetail.details}}
</td>
</tr>

here's a working code.
var jsondata = [{
"shortMessage": "data 1",
"classOriginated": "data 2",
"method": "<i>data 3</i>",
"lineRange": "data 4",
"details": "<b>data 5</b>"
}];
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
$scope.styleRowDetails = jsondata;
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td ng-bind-html="styleRowDetail.shortMessage">
</td>
<td ng-bind-html="styleRowDetail.classOriginated">
</td>
<td ng-bind-html="styleRowDetail.method">
</td>
<td ng-bind-html="styleRowDetail.lineRange">
</td>
<td ng-bind-html="styleRowDetail.details">
</td>
</tr>
</table>
</div>
Hope it helps :)

Simple Example to generate multiple row using ng-repeat Directive in AngularJS.
HTML
<div ng-app="myApp" ng-controller="appCtrl">
<table>
<tr ng-repeat="i in styleRowDetails">
<td>{{i.val}}</td>
</tr>
</table>
</div>
JS
var myApp = angular.module('myApp', [])
myApp.controller('appCtrl', ['$scope', function($scope) {
$scope.styleRowDetails = [{
val: 'welcome'
}, {
val: 'hello'
},{
val: 'world'
}
];
}]);
Working Fiddle: https://jsfiddle.net/rittamdebnath/3oy5fok3/

You should try ng-bind-html
<td ng-bind-html="styleRowDetail.details"></td>
For a better understanding visit the documentation of ng-bind-html by angularjs

ng-repeat does not work on Angular JS

I have created a controller (movies.js) as below-
'use strict';
angular.module('clientApp')
.controller('MoviesCtrl', function ($scope) {
$scope.movies = [
{
title:'Star Wars!',
url:'http://www.google.com'
},
{
title: 'Star Wars2!',
url: 'http://www.google.com'
},
{
title: 'Star Wars3!',
url: 'http://www.google.com'
}
];
});
Now I'm trying to access the values of each objects using ng-repeat in movies.html-
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td> {{ movie.title }} </td>
<td> {{ movie.url }} </td>
</tr>
</tbody>
</table>
However, the values are not populated as expected. Can someone please provide any tips on where should I look to fix it?

Since you are assigning the array to this so
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
this.movies = [{
title: 'Star Wars!',
url: 'http://www.google.com'
}, {
title: 'Star Wars2!',
url: 'http://www.google.com'
}, {
title: 'Star Wars3!',
url: 'http://www.google.com'
}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController as ctrl">
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in ctrl.movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Or assign the array to the scope variable
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.movies = [{
title: 'Star Wars!',
url: 'http://www.google.com'
}, {
title: 'Star Wars2!',
url: 'http://www.google.com'
}, {
title: 'Star Wars3!',
url: 'http://www.google.com'
}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController">
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</div>
</div>

You should try this
'use strict';
angular.module('validationApp' ,[])
.controller('MoviesCtrl', function ($scope) {
$scope.movies = [
{
title:'Star Wars!',
url:'http://www.google.com'
},
{
title: 'Star Wars2!',
url: 'http://www.google.com'
},
{
title: 'Star Wars3!',
url: 'http://www.google.com'
}
];
});

it should be
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in MoviesCtrl.movies">
<td> {{ movie.title }} </td>
<td> {{ movie.url }} </td>
</tr>
</tbody>
</table>
or you should bind it to $scope.movies

Still you won't be able to load external URLs. You need to make a filter to whitelist the external links. Refer below code.
angular.module('myApp')
.filter('trustUrl', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
});
<td> {{ movie.url | trustUrl}} </td>

You need to inject $scope into your controller, and use that to bind your array to your view
.controller('MoviesCtrl', function($scope){
$scope.movies = [
{
title:'Star Wars!',
url:'http://www.google.com'
},{
title: 'Star Wars2!',
url: 'http://www.google.com'
},{
title: 'Star Wars3!',
url: 'http://www.google.com'
}
];
});
Also, don't forget that you need to specify in your view that there is a controller you want to use. For example, in your html:
<div ng-controller="MoviesCtrl">
<!-- any html you associate with your controller -->
</div>

ng-click on <tr> doing nothing

I have consulted these related articles, but the presented solutions do not work:
Clickable bootstrap row with angular
Adding parameter to ng-click function inside ng-repeat doesn't seem to work
Angular ng-click not working in div
Here is my plunkr:: http://plnkr.co/edit/kha6mAKDBtrY0XtTc6Wp?p=preview
<body ng-controller="MainCtrl">
<table>
<caption>Troubles with ng-repeat and ng-click</caption>
<thead>
<tr>
<th>Name</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-click="alert('hi')">
<td>{{employee.name}}</td>
<td>{{employee.occupation}}</td>
</tr>
</tbody>
</table>
var app = angular.module("plunker", []);
app.controller("MainCtrl", function($scope) {
$scope.employees = [
{
name: "John Doe",
occupation: "Miner"
},
{
name: "Theressa",
occupation: "Construction Worker"
}
]
});

It does work, but alert is not part of your $scope so it won't do anything.
You can add it in your controller:
$scope.alert = function(message) { alert(message); }