Angular - How to update table with new values - angularjs

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>

Related

Properly display JSON in table angular

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>

Not able to sort using Smart Table in angularJS

I am using smart table but I am not able to sort the table, the following is my code
<div ng-app="app">
<div ng-controller="app-controller">
<table st-table="EmployeeDetails" class="table table-striped table-hover" st-safe-src="EmployeeData">
<thead>
<tr>
<th st-sort="EmployeeName">Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in EmployeeData">
<td class="col-xs-2">
<small>{{employee.EmployeeName}}</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('app-controller', ['$scope','$http', function ($scope,$http) {
$http.get('/Data/EmployeeDetails.json').success(function (data) {
$scope.EmployeeData = data;
}).error(function () {
alert('error');
});
}]);
</script>
can anyone let me know what exactly is wrong, i have referenced both angular.js and smart-table.js
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/smart-table.js"></script>

You should use 'EmployeeDetails' at ng-repeat
JSFiddle
OK
<tr ng-repeat="employee in EmployeeDetails">
NG
<tr ng-repeat="employee in EmployeeData">
Thanks

Add data into rows on click

I want that when I insert some data into a textbox and click a button, the data should be inserted in a particular table column, and when i keep on adding the data the rows should keep on increasing with the entered data. Code:
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope){
$scope.carnamebind='';
$scope.car=[];
$scope.bindcarName = function(){
var ee=$scope.car;
ee.push($scope.carname);
$scope.carnamebind=ee;
}
})
the html:
<body ng-controller="parkingCtrl">
<h3 ng-model="appTitle"></h3>
<table>
<tr>
<td>Car name</td>
<td>Car model</td>
</tr>
<tr>
<td>{{carnamebind}}</td>
<td></td>
</tr>
<tr>
<td ><input type="text" ng-model="carname"/><input type="button" ng-click="bindcarName()"/></td>
<td></td>
</tr>
</table>
</body>
2 problems are coming:
1) All pushed data into array is inserted in the same column
2) Data is inserted in the form of array, like ["sd","sdasd"]
Thanks

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.carnamebind= [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
];
$scope.bindcarName = function(ee){
$scope.carnamebind.push(ee);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Car name</td>
<td>Car model</td>
</tr>
<tr ng-repeat="x in carnamebind">
<td>{{x}}</td>
<td></td>
</tr>
<tr>
<td ><input type="text" ng-model="carname"/></td>
<td><input type="submit" ng-click="bindcarName(carname)"/></td>
</tr>
</table>
</body>
</html>

How to conditionally enter column markup based on ng-repeat table?

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>

Using ng-repeat with ng-include to create a recursive table

I've done a bit of research around and I cannot seem to find the best pattern to use ng-repeat recursively to create a deep table. There is some noteworthy mentions here by user mgdelmonte regarding the subject, but alas, no solution.
The HTML and template:
<body ng-app="myApp">
<div ng-controller="myAppController">
<script type="text/ng-template" id="tree_item.html">
<tr style="width:100%">
<td>{{data.name}}</td>
</tr>
<div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">
</div>
</script>
<table class="table table-striped">
<thead>
<tr>
<th style="width:30px;">Test</th>
</tr>
</thead>
<tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">
</tbody>
</table>
</div>
</body>
The JS:
angular.module('myApp', []);
function myAppController($scope) {
$scope.treeData = [{
"name": "Root",
"nodes": [{
"name": "Level 1",
"nodes": [{
"name": "Level 2"
}]
}]
}];
}
Here is my jsfiddle: http://jsfiddle.net/8f3rL/86/
This is the absolute farthest I got with it. It traverses the tree fine, but I'm losing the <tr> tags when it recurses down. Instead it's rendering <span>s.
My intuition is telling me that when the ng-repeat runs on that <div>, it is creating a separate scope for those trs and tds, which I guess are illegal (since they have to be bound to a table element).
Changing the div to a table or tbody or tr is no-op as well (not that I'd even want to nest a table in like that).

The browser doesn't like the multiple tbodys and the div tags between the rows. Try this...
<body ng-app="myApp">
<div ng-controller="myAppController">
<script type="text/ng-template" id="tree_item.html">
<td>{{data.name}}
<table style="margin-left: 20px">
<tr ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></tr>
</table>
</td>
</script>
<table class="table table-striped">
<thead>
<tr>
<th style="width:30px;">Test</th>
</tr>
</thead>
<tbody>
<tr style="width:100%" ng-repeat="data in treeData" ng-include="'tree_item.html'"></tr>
</tbody>
</table>
</div>
Live Demo - Fiddle

Resources