<div ng-controller="MyController">
<table border="1">
<tr data-ng-repeat="item in items">
<td data-ng-repeat="textValue in item.value">
<input type="text" data-ng-model="textValue" data-ng-readonly="isReadonly" />
</td>
</tr>
</table>
<input type="button" value="Edit" data-ng-click="enableEdit();" />
</div>
Will have multiple rows with multiple input type text for each row. Initially onload input type are set to readonly. Once user press the edit button all of the input box will become editable. User can change the text box values & save the updated values by clicking on save button.
var MyModule = angular.module('MyModule', []);
MyModule.controller("MyController", function($scope) {
$scope.isReadonly = true;
$scope.items = [{
"id": 1,
"value": {
"value1": 10,
"value2": 20,
"value3": 30,
"value4": 40
}
}, {
"id": 2,
"value": {
"value1": 50,
"value2": 60,
"value3": 70,
"value4": 80
}
}];
$scope.enableEdit = function() {
$scope.isReadonly = false;
}
});
Follow the below plnkr url
http://plnkr.co/edit/g0bpUg2AVjNhWAXG8PXc?p=preview
You should be using ng-if to toggle between the controls as below
<tr data-ng-repeat="item in items">
<td data-ng-repeat="textValue in item.value">
<label class="form-control" ng-if="isReadonly">{{textValue}} </label>
<input type="text" ng-if="!isReadonly" data-ng-model="textValue" />
</td>
</tr>
Controller Method
$scope.enableEdit = function() {
$scope.isReadonly = false;
}
$scope.saveValues=function(){
$scope.isReadonly = true;
}
LIVE DEMO(UPDATED PLUNK)
I assume the problem you are facing is related to changes not getting reflected back to the model.
The assumption was made because you haven't told us your problem in the first place.
Note: I've also added the saveValues() function for completeness.
The problem is due to how ngRepeat directive works and how you have used it. ng-repeat creates a child scope for each textValue and in these child scopes, ng-repeat does not create a 2-way binding for the textValue value. And so your model was never updated.
There are two different ways to solve this:
P.S: Example#2 is just for the demonstration of object technique and should be avoided for your use-case as it would further complicate the data structure of items.
Example#1) Using (key, value) like:
var MyModule = angular.module('MyModule', []);
MyModule.controller("MyController", function($scope) {
$scope.isReadonly = true;
$scope.items = [{
"id": 1,
"value": {
"value1": 10,
"value2": 20,
"value3": 30,
"value4": 40
}
}, {
"id": 2,
"value": {
"value1": 50,
"value2": 60,
"value3": 70,
"value4": 80
}
}];
$scope.enableEdit = function() {
$scope.isReadonly = false;
}
$scope.saveValues = function() {
$scope.isReadonly = true;
console.log($scope.items)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyModule">
<div ng-controller="MyController">
<table border="1">
<tr data-ng-repeat="item in items">
<td data-ng-repeat="(key, textValue) in item.value">
<input type="text" data-ng-model="item.value[key]" data-ng-readonly="isReadonly" />
</td>
</tr>
</table>
<input type="button" value="Edit" data-ng-click="enableEdit();" />
<input type="button" value="Save" data-ng-click="saveValues();" />
</div>
Example#2) Using objects like:
var MyModule = angular.module('MyModule', []);
MyModule.controller("MyController", function($scope) {
$scope.isReadonly = true;
$scope.items = [{
"id": 1,
"value": {
"value1": {
"value": 10
},
"value2": {
"value": 20
},
"value3": {
"value": 30
},
"value4": {
"value": 40
}
}
}, {
"id": 2,
"value": {
"value1": {
"value": 50
},
"value2": {
"value": 60
},
"value3": {
"value": 70
},
"value4": {
"value": 80
}
}
}];
$scope.enableEdit = function() {
$scope.isReadonly = false;
}
$scope.saveValues = function() {
$scope.isReadonly = true;
console.log($scope.items)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyModule">
<div ng-controller="MyController">
<table border="1">
<tr data-ng-repeat="item in items">
<td data-ng-repeat="textValue in item.value">
<input type="text" data-ng-model="textValue.value" data-ng-readonly="isReadonly" />
</td>
</tr>
</table>
<input type="button" value="Edit" data-ng-click="enableEdit();" />
<input type="button" value="Save" data-ng-click="saveValues();" />
</div>
Related
I am trying to show nested data from JSON in a table but not getting succeeded.
My json data:-
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
]
I tried this in controller:-
$scope.Folder = [];
angular.forEach($scope.data.Folder, function(choose) {
$scope.Folder.push(choose);
}
In view I did this
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text">{{g.CPU}}</input>
</div>
</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text">{{g.RAM}}</input>
</div>
</td>
</tr>
</tbody>
I am not getting any output in this. Where am I going wrong?
You are accessing $scope.data.Folder which is not correct because $scope.data is an Array.
First try to loop on $scope.data and then a loop on Folder
$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
if(choose && choose.Folder && choose.Folder.length) {
angular.forEach(choose.Folder, function(choose1) {
$scope.Folder.push(choose1);
}
}
}
In your controller do like this:
$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
if(choose && choose.Folder){
$scope.Folder.push(choose.Folder);
}
})
You need to use $scope.data[0].Folder in your controller as $scope.data is a array type. And I am not sure how you are rendering your table but as the question is only related to getting the value in $scope.Folder this is your solution.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
];
$scope.Folder = [];
angular.forEach($scope.data[0].Folder, function(choose) {
$scope.Folder.push(choose);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text" />{{g.CPU}}
</div>
</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text" />{{g.RAM}}
</div>
</td>
</tr>
</tbody>
</div>
Here is one more example that I think is something you are expecting
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
];
$scope.Folder = [];
angular.forEach($scope.data[0].Folder, function(choose) {
$scope.Folder.push(choose);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table border='1'>
<tr>
<th>Name</th>
<th>CPU</th>
<th>RAM</th>
</tr>
<tr ng-repeat = "g in Folder">
<td>{{g['Name']}}</td>
<td>{{g['CPU']}}</td>
<td>{{g['RAM']}}</td>
</tr>
</table>
</div>
You can try the following
<div ng-repeat="item in data">
<div ng-repeat="g in item.Folder">
Name:{{g.Name}}-
Cpu:{{g.CPU}}-
Ram:{{g.RAM}}
</div>
</div>
using above method would eliminate the need of preparing data in your controller
Demo
Table Demo
All you need to do is update your iterator function
from
angular.forEach($scope.data.Folder, function(choose)
to
angular.forEach($scope.data[0].Folder, function(choose)
look at your json Folder is first element....
Is it possible to show/hide an element after a function call that returns a boolean? Scenario is, to show "Ready" when all n-items have an "agreed" flag. If not, show something else. Value of agreed flag is changed with a radio button.
$scope.data = [
{
title: "Agreement #1",
agreed: false,
},
{
title: "Agreement #2",
agreed: false,
},
];
$scope.ready = function()
{
var go = true;
angular.forEach($scope.data, function(item, key) {
go &= item.agreed==true;
});
return go;
}
Then, calling:
<div ng-show="ready()">Go!</div>
<div ng-hide="ready()">Missing the points.</div>
Problem with this code: If all radio buttons are checked, ie. all values of agreed flag are set to true, the ready() is not auto updated.
You can bind the boolean value of agreed to the ng-model of the radio button and use ng-value for setting true/false for each agreement.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [
{
title: "Agreement #1",
agreed: false,
},
{
title: "Agreement #2",
agreed: false,
}
]
$scope.ready = function()
{
var go = true;
angular.forEach($scope.data, function(item, key) {
go &= item.agreed==true;
});
return go;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-show="ready()">Go!</div>
<div ng-show="!ready()">Missing the points.</div>
<table>
<tr>
<th>Agreement </th>
<th>Status</th>
</tr>
<tr ng-repeat="value in data">
<td>{{value.title}}</td>
<td>
Yes <input type="radio" ng-model="value.agreed" ng-value="true" />
No <input type="radio" ng-model="value.agreed" ng-value="false" />
</td>
</tr>
</table>
<span>{{data}}</span>
</div>
</body>
</html>
i think u missed the data variable square bracket
$scope.data = [
{
title: "Agreement #1",
agreed: true,
},
{
title: "Agreement #2",
agreed: false,
},
];
https://plnkr.co/edit/xWdro1SCUTeLbRVbEMWi?p=preview
.test{color:red;background:blue;}
.test.selected {
position:relative; left: 100px; padding:10px; background:green;
}
<div ng-style="myStyle" ng-class="{select: x.selected}" ng-click="select(x)" ng-repeat="x in myData" class="test"></div>
$scope.select = function (text) {
text.selected = true;
};
$scope.myStyle = {
'color':'white',
'font-weight':'bold'
}
When the div element has className "selected" by using condition true, how can I add 'myStyle' in ng-style as well. How to apply inline ng-style dynamically if ng-class condition is true? Here below I am able to see in debugger in inline with classNames added. Now I have the condition true and I can see the classname "selected" to it(class="test ng-scope selected"), All I want is an inline ng-style="myStyle" to be added when its true.
<div ng-class="{select: x.selected}" ng-click="select(x)" class="test ng-scope selected" ng-repeat="x in myData">
Try like to this.
<div ng-style="x.selected && {'color':'white','font-weight':'bold'}"
ng-click="select(x)" ng-repeat="x in myData" ></div>
Demo
var app = angular.module('anApp', ['angular.filter']);
app.controller('aCtrl', function($scope) {
$scope.data = [
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
];
$scope.select = function(x){
x.selected = !x.selected;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<div ng-style="x.selected && {'color':'red','font-weight':'bold'}"
ng-click="select(x)" ng-repeat="x in data" >
{{x.value}}
</div>
</div>
Dont use ng-style for selected item, you can do this with ng-class(Recommended)
Style
.selected {
'color':'white',
'font-weight':'bold'
}
HTML
<div ng-class="{'selected': x.selected}" ng-click="select(x)" ng-repeat="x in myData" ></div>
Controller
$scope.select = function(x){
x.selected = !x.selected;
}
I have an angular object, i have to show its records with filter and sorting. Also i have to show the records of unique values per keys within the object with checkbox.
I shows record with filter and sorting also i showed the unique values per key with checkbox.
Now i have to get the values of these checkbox per key.
Here is my code with plunker url below.
index.html
<body ng-controller="myController">
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input type="checkbox">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
See in plunker http://embed.plnkr.co/wblXhejmSWApBeCAusaI/
You can do like below example:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<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="script.js"></script>
</head>
<body ng-controller="myController">
<h1>Filter Table</h1>
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input ng-model="item" type="checkbox" ng-change="getCheckedValues(item,dv,hv.filter)">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
var array = []
array["name"] = [];
array["age"] = [];
array["designation"] = [];
array["city"] = [];
$scope.getCheckedValues = function(e,val,key){
console.log(val)
if(e){
array[key].push(e)
}else{
array[key].shift()
}
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
console.log(array[tab])
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
Alright. Apologies for my previous answer I completely botched the question.
Anyhow I spent almost an hour trying to solve this and managed to do it using $scope.$$watchers[0].last and underscorejs.
//this is how getChecked looks like now
$scope.getChecked = function(tab) {
var selectedKey = tab.$$watchers[0].last;
_.each($scope.structure.info,function(row){
_(row).pairs().filter(function(item){
_.each(item,function(key){
if(key===selectedKey)
{
console.log(row);
return;
}
})
})
})
Above method is responsible for identifying the key and spitting in console, each time you select a key in below table. So check console.
The solution is on below plunkr.
https://embed.plnkr.co/kbiCwhW0RrdHtO3hVEEk/
I'm using angularjs and have a table which I build from two scope objects. It would be really nice have some kind of functionality where I can add columns by my self. The big problem is that I would like to use the existing values and try to use them in my new column. Is that possible? Or do I have to build up the columns on the server side and then return it?
PLUNKER
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked">
{{ row[column.value] }}
</td>
</tr>
</tbody>
</table>
<br><br>
<input type="button" value="Add new column" ng-click="addColumn()" />
<br><br><br>
<p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
$scope.addColumn = function() {
var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }
$scope.columnsTest.push(newCol);
}
$scope.columnsTest = [{
id: 'Value1',
checked: true,
value: 'Value1'
}, {
id: 'Value2',
checked: true,
value: 'Value2'
}, {
id: 'Value3',
checked: true,
value: 'Value3'
}];
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];
});
</script>
You can use the $parse service.
Inject $parse into your controller and add a new method:
$scope.getCellValue = function(row, column) {
var getter = $parse(column.value);
return getter(row);
// Alternatively:
// return $parse(column.value)(row);
};
Use it like this:
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked">
{{ getCellValue(row, column) }}
</td>
</tr>
Demo: http://plnkr.co/edit/DVF2LXeZPqCL1Ik3EyVf?p=preview
Explanation:
The $parse service accepts a string expression to compile and returns a getter function. In your example we use the column.value:
var columnValue = 'Value1 + Value2 + Value3';
var getter = $parse(columnValue);
The returned getter function accepts a context object which the expression should be evaluated against. In your example we use the row object:
var row = { id: 1, "Value1": 911, "Value2": 20, "Value3": 20 };
var result = getter(row);
Basically the $parse service uses the string expression and the context object
and goes:
You want Value1 + Value2 + Value3, and you want to retrieve these values
from the row object.
Illustrated like this:
var result = row['Value1'] + row['Value2'] + row['Value2'];
With a 2D array you could structure your data like this:
$scope.rows = [
[911,20,30], // index 0 of 1st dim = 1st row; index 0,1,2 of 2nd dim = cells
[200,20,30] // index 1 of 1st dim = 2nd row
];
With this you can use two loops to get the cell and do your calculation, first loop for row and second for cell value.
Please have a look at the demo below or this plunkr.
In the demo I've created a function that does the calculation if you'd also pass an array like [0,1] it will tell the function to sum only col0 and col1 values.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
function sumRows(data, values2sum) {
// e.g. data = [ [11, 12, 13], [21, 22, 23] ]
// new col = [ 32, 34, 46] // sum all
// new col = [ 32, 34, 0 ] // sum value1 & 2
// --> values2sum = [ 0, 1 ]
if ( angular.isUndefined(values2sum) ){
var all = true;
var value2sum = [];
}
angular.forEach(data, function(row, rowIndex) {
rowSum = 0;
angular.forEach(row, function(cell, colIndex) {
if ( all || values2sum.indexOf(colIndex) != -1 ) {
rowSum += cell;
}
});
row.push(rowSum);
})
}
$scope.addColumn = function() {
var rowSum, newRow = [], colId = $scope.columnsTest.length + 1;
$scope.columnsTest.push({
id: 'Value'+ colId,
checked: true,
value: 'Value'+colId
}); // rename columnsTest to tableHeading
//sumRows($scope.rows, [0,2]); // add value1 + value3
sumRows($scope.rows); // complete sum
//var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }
//$scope.columnsTest.push(newCol);
}
$scope.columnsTest = [{
id: 'Value1',
checked: true,
value: 'Value1'
}, {
id: 'Value2',
checked: true,
value: 'Value2'
}, {
id: 'Value3',
checked: true,
value: 'Value3'
}];
/*$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];*/
$scope.rows = [
[911,20,30],
[200,20,30]
]
});
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div ng-app="plunker" ng:controller="MainCtrl">
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-repeat="cell in row track by $index">
<!--ng-if="column.checked">-->
{{ cell }}
</td>
</tr>
</tbody>
</table>
<br>
<br>
<input type="button" value="Add new column" ng-click="addColumn()" />
<br>
<br>
<br>
<p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>