* here is html code for checkbox am using checkbox for dynamic value initiazation from databases but checkbox are not selecting any value*
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp}}</td> <td> <input type="checkbox" ng-model="emp.selected" value="{{emp.name}}"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and js controller code is
angular.forEach($scope.nodueaccountassets,function(emp){
if (emp.selected) $scope.albumNameArray.push(emp.name);
alert(emp.selected);
Assuming that you want to get the selected employees, you can do this,
var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.albumNameArray = [];
$scope.nodueaccountassets = [{
"name": "Raymond",
"age": 28,
"selected": false
}, {
"name": "Bruce",
"age": 96,
"selected": false
}, {
"name": "Laura",
"age": 62,
"selected": false
}];
$scope.getSelected = function() {
angular.forEach($scope.nodueaccountassets, function(emp) {
if (emp.selected)
$scope.albumNameArray.push(emp.name);
})
}
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="listController">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp}}</td>
<td>
<input type="checkbox" ng-model="emp.selected" value="{{emp.name}}" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<button ng-click="getSelected()">Get Selected</button>
<ul>
<li ng-repeat=" opt in albumNameArray">
{{ opt }}
</li>
</ul>
</div>
</body>
</html>
possibly the value you are getting from server for emp.selected in string format instead of booleans you are getting value like "true",
check if you are getting response like this if so you need to convert selected object to boolean.
[{
name: 'sushil',
selected: "true"
}]
Related
I'm trying to replace my data in my table with strings "Yup" and " ": if the string is equal to "yes" then display "Yup" else don't display, Sorry I'm newbie and I saw some solutions and I tried this but doesn't work: {{ person.value ? "Yup":" "}} .. Any help please
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
value: [
{value:"Yes"},{value:"no"},{value:"yes"},
{value:"No"},{value:"no"}
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Value</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.value">
<td align="center">{{ person.value }}</td>
<td align="center">{{ person.value ? "Yup":" "}}</td>
</tr>
</tbody>
</table>
</div>
If you can't change your values you can call toLowerCase() on the value to make sure it's lower case and then compare it to "yes"
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
value: [
{value:"Yes"},{value:"no"},{value:"yes"},
{value:"No"},{value:"no"}
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Value</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.value">
<td align="center">{{ person.value }}</td>
<td align="center">{{ person.value.toLowerCase() == "yes" ? "Yup":" "}}</td>
</tr>
</tbody>
</table>
</div>
The reason your code wasn't working it because when you use a ternary (? :) it converts the values into truthy values, and a non-empty string will always be true, so every value is true and will always be "Yup"
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
value: [
{value:"Yes"},{value:"no"},{value:"yes"},
{value:"No"},{value:"no"}
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Value</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.value">
<td align="center">{{ person.value }}</td>
<td align="center">{{ person.value.toLowerCase() == "yes" ? "Yup":" "}}</td>
</tr>
</tbody>
</table>
</div>
I have to the below JSON data in a bootstrap table. I can show the one level data, but I don't know how to show array inside array data in bootstrap table.
[
{
"seriesName": "Indian Bank",
"dataVlaues": {
"11/12/2017": 50,
"11/13/2017": 40,
"11/14/2017": 60,
"11/11/2017": 100
}
},
{
"seriesName": "Indian Bank1",
"dataVlaues": {
"11/18/2017": 12,
"11/17/2017": 27,
"11/16/2017": 30,
"11/15/2017": 101
}
}
]
Please find working solution below, enjoy :)
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.userTypes = [{
"type": 'Parent',
"options": {
"option1": "11QWERT",
"option2": "22QWERT"
}
}, {
"type": 'Parent1',
"options": {
"option22": "11QWERT",
"option222": "22QWERT"
}
}];
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in userTypes">
<td>{{user.type}}</td>
<td>
<button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
Show
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="showOptions">
<td colspan="2">
<table class="table table-bordered">
<tbody>
<tr ng-repeat="(key, val) in user.options">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Please check this jsfiddle link
https://jsfiddle.net/lalitSachdeva1/0xb732e1/1/
I have updated the ul li to table like structure;
your js will remain same and the key concept here is ng-repeat-start and ng-repeat-end
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<thead>
<tr>
<td>parent</td>
<td>option1</td>
<td>option2</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in userTypes">
<td>{{user.type}}</td>
<td ng-repeat-start="(key,value) in user.options">{{key}}</td>
<td ng-repeat-end="(key,value) in user.options">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I have two json objects one is
Jobs
[
{
"code":"Maxo- 1033",
"title":"Test",
"deleted_by":2,
"updated_at":"2017-08-23 06:32:42"
},
{
"code":"Maxo- 1034",
"title":"Test",
"deleted_by":2,
"updated_at":"2017-08-24 04:55:10"
}
]
other is headers
[
"code",
"title",
"deleted_by",
"updated_at"
]
I want to print jobs data using headers data
like the below code.
<tbody>
<tr ng-repeat = 'job in jobs'>
<td ng-repeat = 'column in headers'>
#{{job.column}} //i want job.code for first iteration and like
</td>
</tr>
</tbody>
Expected Table Output:
code title deletedby updated_at
Maxo Test 2 2017-08-23 06:32:42
you can do it by nested ng-repeats
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.jobs = [{
"code": "Maxo- 1033",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-23 06:32:42"
}, {
"code": "Maxo- 1034",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-24 04:55:10"
}];
$scope.headers = [
"code",
"title",
"deleted_by",
"updated_at"
];
});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table>
<tbody>
<tr>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
<tr ng-repeat="job in jobs">
<td ng-repeat="header in headers">{{job[header]}}</td>
</tr>
</tbody>
</table>
</body>
You can do this with nested ng-repeat
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.jobs = [{
"code": "Maxo- 1033",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-23 06:32:42"
}, {
"code": "Maxo- 1034",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-24 04:55:10"
}];
$scope.headers = ["code", "title", "deleted_by", "updated_at"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table>
<thead>
<tr>
<th ng-repeat="header in headers">{{header| uppercase }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="job in jobs">
<td ng-repeat="header in headers"> {{job[header]}} </td>
</tr>
</tbody>
</table>
</body>
See this No need of Nested NgRepeat :
var app = angular.module('App',[]);
app.controller('Ctrl',function($scope){
$scope.jobs = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},{"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}];
$scope.Headers = [
"code",
"title",
"deleted_by",
"updated_at"
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="Ctrl">
<table>
<thead>
<tr >
<th ng-repeat="h in Headers">{{h}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="job in jobs">
<td> {{job.code}} </td>
<td> {{job.title}} </td>
<td> {{job.deleted_by}} </td>
<td> {{job.updated_at}} </td>
</tr>
</tbody>
</table>
</body>
Here you have to play with table structure of html.
You can do like this:
JS
$scope.headerArr = ["code",
"title",
"deleted_by",
"updated_at"
]
$scope.childObj = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},
{"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}]
HTML
<table>
<thead>
<tr >
<th ng-repeat = 'item in headerArr'>
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = 'item in childObj'>
<td >
{{item.code}}
</td>
<td >
{{item.title}}
</td>
<td >
{{item.deleted_by}}
</td>
<td >
{{item.updated_at}}
</td>
</tr>
</tbody>
</table>
Hope this demo will help you.
Try this
<tbody>
<tr ng-repeat = "job in jobs">
<td ng-repeat="header in headers">
{{job[header]}}
</td>
</tr>
</tbody>
I am using angularjs and i want to create dynamic row with ng-repeat but unable to achieve. I will clear after see my code. Here is my code and jsfiddle:-
td.controllers.js
function TodoCtrl($scope) {
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
}
td.html
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products" colspan="2">{{product.name}}</th>
</tr>
<tr>
<th>A</th> //I want to dynamic it
<th>B</th> //
</tr>
</thead>
</table>
</div>
</div>
My desire output is:-
-----------------------------
Month | Abc | Bil | Smart
| A|B | A|B | A|B
----------------------------
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th> <!--I want to dynamic it-->
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</div>
Try this code
Here table header is created dynically and table data also.
Let me know if you are getting nay problem
try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<div>
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th>
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
I want to render tables out of JSONs. The keys should be the TH-tag and the value the TD-tad under it. I managed to render the tables the other way around:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.init = function(){
$scope.json = {
"entities":{"bezeichnung":"Basis","name":"Basis","id":16},
"entities2":{"bezeichnung":"Basis2","name":"Basis2","id":17}
}
}
});
</script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<div ng-repeat="(key,value) in json">
<table border="1">
<tr ng-repeat="(k,val) in value"><td>{{k}}</td><td>{{val}}</td></tr>
</table>
</div>
</div>
But how to do it the other way around?
jsfiddle
You need to iterate over the keys once for the headings, then iterate over the values for the row.
<div ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<div ng-repeat="(key, table) in json">
<table border="1">
<thead>
<tr>
<th ng-repeat="(key, _) in table">{{key}}</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="(_, value) in table">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Updated jsfiddle.
you also do like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', function ($scope) {
$scope.json = [
{ "bezeichnung": "Basis", "name": "Basis", "id": 16 },
{ "bezeichnung": "Basis2", "name": "Basis2", "id": 17 }
]
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<table>
<tr>
<td>Index</td>
<td>bezeichnung</td>
<td>name</td>
<td>Id</td>
</tr>
<tr ng-repeat="(key,value) in json">
<td>{{key}}</td>
<td>{{value.bezeichnung}}</td>
<td>{{value.name}}</td>
<td>{{value.id}}</td>
</tr>
</table>
</div>
</body>
</html>