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>
Related
I want to change the number of columns on modifying a boolean variable.
Check my example (in plnkr):
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('myCtrl', function($scope, $log) {
$scope.debug = {};
$scope.fields = [{
header: "first",
hideField: !$scope.debug.flag
},
{
header: "second"
},
{
header: "third"
},
{
header: "fourth"
},
];
$scope.entries = [{
first: "hello1",
second: "hello2",
third: "hello3",
fourth: "hello4"
}, ]
$scope.myBool = true;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="myCtrl">
<button id="testButton" class='btn btn-danger' ng-click='debug.flag = !debug.flag'><i class="glyphicon glyphicon-hand-right"></i> refreshFields! debug.flag = {{!!debug.flag}}</button>
<hr>
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h4 class="label label-info">table 2 with ng-if => property.hideField = false</h4>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h2 class="label label-info">table 3 without ng-if</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
How to reproduce it:
Click on the red button and the flag will toggle from false to true.
Expected behavior:
Table 1 starts with 3 columns. It should show four after clicking.
Table 2 starts with 1 column. It should show 0 columns after clicking.
Table 3 is just a control table with all the data.
Your heading would become visible if you modified the value of its hideField property. But you're not doing that. You're modifying the value of $scope.debug.flag.
The fact that hideField was initialized with the value of $scope.debug.flag won't magically change hideField every time you change $scope.debug.flag.
Just like if you do
var a = 1;
var b = a;
a = 42;
The value of b will still be 1. Not 42.
Changing the value of $scope.debug.flag won't change the value of hideField. Because, it has already been initialized at the time of controller load. The workaround you can apply here is bind that hideField to a method and evaluate that in your ng-if. Sample below.
JS:
$scope.fields = [{
header: "first",
hideField: function() {
return !$scope.debug.flag;
}
}, {
header: "second"
}, {
header: "third"
}, {
header: "fourth"
}, ];
HTML:
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField()">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField()">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
This is not a clean solution though. But, still will solve your problem.
I am trying to use angular datatables optionbuilder to create button for excel sheet download. But I am getting error withButton is not a function. I have downloaded all this files and have included in my main html page.
In HTML
<script src="/lib/angular-datatables.min.js"></script>
<script src="/lib/js_button/dataTables.buttons.min.js"></script>
<script src="/lib/js_button/buttons.flash.min.js"></script>
<script src="/lib/js_button/jszip.min.js"></script>
<script src="/lib/js_button/pdfmake.min.js"></script>
<script src="/lib/js_button/vfs_fonts.js"></script>
<script src="/lib/js_button/buttons.html5.min.js"></script>
<script src="/lib/js_button/buttons.print.min.js"></script>
<script src="/lib/angular-datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/js_button/buttons.dataTables.min.css">
In controller
var app = angular.module('myApp', ['Alertify','ngRoute', 'datatables']);
app.controller('MainCtrl', function($scope, $http, $location,
DTOptionsBuilder, DTColumnBuilder,Alertify) {..
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [])
.withOption('bFilter', false)
.withOption('bSort', false)
.withOption('bAutoWidth',true)
.withOption('sScrollY' , "200")
.withOption('sScrollX' , "100%")
.withOption('bScrollCollapse' , true)
.withPaginationType('full_numbers')
.withOption('lengthMenu', [5, 10, 25, 50, 100, 150, 200])
.withDOM('lrtip')
.withButtons([
{
extend: "excelHtml5",
filename: "MailItemList",
text: "<i class='fa fa-file-excel-o'></i> Excel",
title: "Mail Item List",
exportOptions: {
columns:[2,3,4,5,6,7,8.9,10,11,12,13,14,15,16,17,18,19,20,21,22]
},
exportData: { decodeEntities: true }
}
]);
..}
In Html
<table id="table1" class="table table-bordered table-hover fixed" datatable="ng" dt-columns="vm.dtColumns" dt-options="vm.dtOptions" >
<thead id="theadstyle">
<tr>
<th class="alignstyle"> </th>
<th class="alignstyle">1</th>
<th class="alignstyle">2</th>
<th class="alignstyle">3 </th>
<th class="alignstyle">4 </th>
<th class="alignstyle">5 </th>
<th class="alignstyle">6</th>
<th class="alignstyle">7 </th>
<th class="alignstyle">8</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="build in buildmodel1">
<td> {{build.1}} </td>
<td> {{build.2}} </td>
<td> {{build.3}} </td>
<td> {{build.4}} </td>
<td> {{build.5}} </td>
<td> {{build.6}} </td>
<td> {{build.7}} </td>
<td> {{build.8}} </td>
</tr>
</tbody>
</table>
Can someone explain me what else needs to be added to this piece of code.
Adding B to dom, i.e .withDOM('Blrtip') will show buttons.
Error "withButtons is not a function" is because the js file dataTables.buttons.min.js is missing or , if you are in angular the module datatable.buttons is not defined
angular.module('app.components', [
...,'datatables.buttons']
Any remarks?
I have an specific requirement where the json data comes like this:
[{Id : "a", Name : "John", age : 50},
{Id : "b", Name : "Bob", age : 40}]
I want to show it in a table using ng-repeat, but in a way where headers come in the first column, as below:
<table>
<tr>
<td>Id</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Name</td>
<td>John</td>
<td>Bob</td>
</tr>
<tr>
<td>Age</td>
<td>50</td>
<td>40</td>
</tr>
</table>
Is there a way to achieve this using angularjs?
Thanks
Provided you have a controller:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.data = [
{Id : "a", Name : "John", age : 50},
{Id : "b", Name : "Bob", age : 40}
];
});
Your markup would then be as follows. If the data isn't going to change after it is displayed:
<table>
<tr>
<td>Id</td>
<td ng-repeat="item in ::data">{{::item.Id}}</td>
</tr>
<tr>
<td>Name</td>
<td ng-repeat="item in ::data">{{::item.Name}}</td>
</tr>
<tr>
<td>Age</td>
<td ng-repeat="item in ::data">{{::item.age}}</td>
</tr>
</table>
If the data is going to change after it is displayed, and you want the view to update accordingly, then:
<table>
<tr>
<td>Id</td>
<td ng-repeat="item in data track by $index">{{item.Id}}</td>
</tr>
<tr>
<td>Name</td>
<td ng-repeat="item in data track by $index">{{item.Name}}</td>
</tr>
<tr>
<td>Age</td>
<td ng-repeat="item in data track by $index">{{item.age}}</td>
</tr>
</table>
You can convert your array in an object, then you can use nested ng-repeats in view, as below:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
var array = [
{
"Id":"a",
"Name":"John",
"age":50
},
{
"Id":"b",
"Name":"Bob",
"age":40
}
];
// If you're sure that the properties are always these:
$scope.mainObj = {
"Id": [],
"Name": [],
"age": []
};
// If you're unsure what are the properties:
/*
$scope.mainObj = {};
Object.keys(array[0]).forEach(function(value) {
$scope.mainObj[value] = [];
});
*/
// Iterates over its properties and fills the arrays
Object.keys($scope.mainObj).forEach(function(key) {
array.map(function(value) {
$scope.mainObj[key].push(value[key]);
})
});
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<table>
<tr ng-repeat="(key, values) in mainObj track by $index">
<td ng-bind="key"></td>
<td ng-repeat="value in values track by $index" ng-bind="value"></td>
</tr>
</table>
</body>
</html>
I hope it helps!
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>
I'm new to angularjs. How to get the total amount in the table Total Amount column and display in input textbox? I think this plunker can solve my problem but I can't access it now. http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview
Here is my table sample
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_queue in data | filter:searchFilter">
<td>{{payment_queue.product_name}}</td>
<td>{{payment_queue.sold_quantity}}</td>
<td>{{payment_queue.amount}}</td>
</tr>
</tbody>
</table>
Total Amount: <input type="text value=""> <--- the total amount value goes here...
js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('productsalesController', ['$scope', '$http', function ($scope, $http) {
$scope.data=[];
$http.get("../php/paymentQueuedata.php")
.success(function(data){
$scope.data = data;
})
.error(function() {
$scope.data = "error in fetching data";
});
}]);
php json
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "rmsdb");
$result = mysqli_query($connect, "select * from payment_queue");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
There a way to get the totals without using a function.
Just use ng-init. If you need to allow the list to change or be filtered, use ng-repeat with it to force recalculation of the totals.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Ext</th>
</tr>
</thead>
<tbody ng-repeat="_ in [ [ search, products ] ]" ng-init="total = 0">
<tr ng-repeat="product in products | filter: search">
<td>{{ product.name }}</td>
<td>{{ product.quantity }}</td>
<td>{{ product.price }}</td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{ total }}</b></td>
</tr>
</tbody>
</table>
See http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview for a workinig example.
My solution to my problem..
in my controller
$scope.totalAmount = function(){
var total = 0;
for(count=0;count<$scope.data.length;count++){
total += parseInt($scope.data[count].total_amount,10);
}
return total;
};
in html
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_queue in data | filter:searchFilter">
<td>{{payment_queue.product_name}}</td>
<td>{{payment_queue.sold_quantity}}</td>
<td>{{payment_queue.amount}}</td>
</tr>
</tbody>
</table>
Total Amount: <input type="text value="{{ totalAmount() }}"> <--- the total amount value goes here...
You can do like this. This is good solution for your problem.
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table class="table table-striped">
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.years}}</td>
<td>{{item.amount}}</td>
<td>{{item.interest}}%</td>
</tr>
<tr>
<td>Total:</td>
<td>{{getTotal('years')}}</td>
<td>{{getTotal('amount')}}</td>
<td>{{getTotal('interest')}}</td>
</tr>
</tbody>
</table>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: 'xxx', amount: 13, years: 3, interest: 2},
{name: 'yyy', amount: 23, years: 4, interest: 3},
{name: 'zzz', amount: 123, years: 4, interest: 4}
];
$scope.getTotal = function(int) {
var total = 0;
angular.forEach($scope.items, function(el) {
total += el[int];
});
return total;
};
});
you can use this url also. Thank you !!!
http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview