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>

How to update a specific value inside ng-repeat in Angular?

So I have a code that gets all the products in my api
:
Controller
loadProducts();
function loadProducts() {
$http.get('/api/products').then(function(response) {
$scope.products = response.data
});
}
$scope.Update = function(id) {
//do update code here and when it succeeds, load products function
loadProducts();
}
HTML
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Action</td>
</tr>
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p.id)"></a></td>
</tr>
</table>
The code is working though I have lots of data being loaded that whenever I update a single item, the whole data will be loaded again.
Is there a way that for example, I updated a single item,and it will be the only one being loaded instead of loadProducts(); loading everything?
Any help would be much appreciated.

On recalling of loadProducts from update your fetching same data....so you dont need to call it again.....only if u want to fetch some new based on some id or something then only you need it......have a look at below code how to replace the existing array data with index value
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.products = [
{"id":1,"name":"a"},
{"id":2,"name":"b"},
{"id":3,"name":"c"},
{"id":4,"name":"d"},
];
$scope.Update = function(id,index) {
$scope.products[index].name="h";
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Action</td>
</tr>
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><button ng-click="Update(p.id,$index)">upit</button></td>
</tr>
</table>
</body>
</html>
Here i added a sample data for you and when you click on a upit i am passing the index value to update function....by using this i am overriding the name property...like if you have new data from api then also you use this by fetching the data first and inserting like this.

No need to call loadProducts again, simply update the existing products array
$scope.Update = function(id, $index) {
//do update code here and when it succeeds, update the existing products array
$scope.products[$index] = updatedProduct;
}

Do not call loadProducts() on updating each item. Since angular supports Two-way data binding ,whenever you update data it will remain on the client side.
$scope.Update = function(id) {
//remove from here
loadProducts();
}
Once everything is updated, provide a way to store it on the server side. Load all the products, whenever an application is loaded initially.
In order to limit the data that needs to be shown on the interface, you can use limitTO inside ng-repeat
<tr ng-repeat="p in products | limitTo : 100">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p.id)"></a></td>
</tr>

Pass the property and index to update. $index you can get the current item index. Also if you need to update the second item only in products then you can check it $index==2.
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p.id, $index)"></a></td>
</tr>
</table>
$scope.Update = function(id, index) {
$scope.products[index] = updatedProduct;
}

Option 1:
Use $index to track the index of the ng-repeat.
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update($index)"></a></td>
</tr>
Inside your controller:
$scope.Update = function(index) {
$scope.products[index].name = newValue; //Update Name of a particular Product
}
This edition will be populated to the View.
Option 2:
Pass the product as a parameter to the controller function Update .
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p)"></a></td>
</tr>
Inside your controller:
$scope.Update = function(product) {
product.name = newName; //Update Name of a particular Product
}

$values not printing in ng-repeat which avilable in map in angularjs

I have map which is having key and vaule has values startes with $. And i am displaying these things in table using ng-repeate. But values which start with $ not printing in table.
I have sharing code, can some please let me know how can i achive this
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
outside of map:------- {{name1}} --------printing ok
<br> <br>
<table >
<tr>
<td width="15%" class="greyTdHeads tdPad">Field Name</td>
<td width="14%" class="greyTdHeads tdPad">Field Value</td>
</tr>
<tr ng-repeat="(key,value) in params">
<td class="whiteTd tdPad">{{key}}</td>
<td ><input
Type="text"
ng-model="params[key]"></input></td>
</tr>
</table>
inside of map , not able to print
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.name1 = "$top";
$scope.params=
{without$:"without$val","$with$":" ",$batchsize:" ",$expand:" ",$filter:" ",$orderby:" ",$select:" ",$skip:" ",$top:" "}
});
</script>
</body>
</html>

Angular ignore variables starting with '$' because he uses some variables with this standard like for example $$hashkey
it applys to angular.equals, {{}}, ng-bind
you can create a new directive and read those values but i dont recommend it
have a good day.

How to pass array to html in angularjs1.5.5

How can I pass array Json data from angularjs Controller to html.
Here is my html
<body ng-app="bookApp">
<div ng-controller="bookListCtr">
<table>
<thead>
<tr>
<th>something</th>
<th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><( item.id )></td>
</tr>
</tbody>
</table>
</div>
</body>
Here is my Angularjs
var bookApp = angular.module('bookApp', []);
bookApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<(');
$interpolateProvider.endSymbol(')>');
});
bookApp.controller('bookListCtr', function ($scope, $http) {
$http.get('http://localhost/client_side/public/book').success(function(data) {
if(data.s_respond === 200){
$scope.items = data.data;
console.log(data.data)
}
});
});
This is Json data After console
s_respond = 200
data = "[{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]"

I think that you need parse the json
$scope.items = JSON.parse(data.data);
a link that explain that:
https://www.quora.com/How-can-I-convert-JSON-format-string-into-a-real-object-in-JS

There r two tags... meaning 2 column try adding another in Ua body
<body ng-app="bookApp"> <div ng-controller="bookListCtr">
<table>
<thead>
<tr> <th>something</th> <th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items"> <td>{{item.id }}</td>
<td>something else</td>
</tr>
</tbody>
</table>
</div>
</body>

passing parameter from html to javascript in Angular

I have a javascript function to which I should pass a parameter.This parameter should be retrieved from html like this
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
my function is accounts.findAllAccountsByRestaurant() and the parameter is restaurant, which is retrieved from ng-repeat.How can I pass this parameter to the function?Thanks in advance.

try like this
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="product in products">
<td ng-init="Y(product)">{{product}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.products=[11,22,33];
$scope.Y= function(ar)
{
alert(ar);
};
});
</script>
</body>

If you've defined your scope correctly, everything should work as it is:
http://jsfiddle.net/jpwup7Lb/5/
$scope.accounts={
selectedRestaurants:
["one","two","three"],
findAllAccountsByRestaurant:function(restaraunt){
return "here's all accounts for "+restaraunt;
}
}

try doing this:
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
Then in your controller
$scope.accounts.findAllAccountsByRestaurant = function(restaurant) { return alert(restaurant); };