I have this html code which uses angularjs to display contents in a table.
<div ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td>{{item.ON_OFF}}</td>
</tbody>
</table>
</div>
The webpage looks like this;
Here is the controller code.
.controller('CheckCtrl', ['$scope', '$http', 'configuration',
function ($scope, $http, $configuration) {
var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json";
$http.get(url_api).success(function(data)
{
$scope.check_items = data;
});
I would like to change the On/Off columns number character into a checkbox. If the number character is '0', the checkbox is unchecked. If the number character is '1', the checkbox is checked.
I am using angularjs v1 and twitter bootstrap.
EDIT: Sorry, I realized that my checkbox value is a character, not a number. They are '0', '1' and not 0, 1.
function myCtrl($scope) {
$scope.check_items = [ {
'SERIAL':12345,
'NAME': 'ANil Kumar Ram',
'ID' : 1,
'ON_OFF': '1'
},{
'SERIAL':6453,
'NAME': 'Rohan Ram',
'ID' : 2,
'ON_OFF': '0'
},{
'SERIAL':732,
'NAME': 'Sunil Ram',
'ID' : 3,
'ON_OFF': '0'
},{
'SERIAL':1261,
'NAME': 'Ram Jitesh',
'ID' : 4,
'ON_OFF': '1'
}]
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td>
</tbody>
</table>
</div>
Hope this will help.
<input type='checkbox' ng-checked='{{item.ON_OFF == 1}}'>
Think that should do it.
<input type="checkbox" ng-model="{{item.ON_OFF}}" ng-true-value="1" ng-false-value="0">
ng-true-value the value that will set the input checked
ng-false-value="0" the value that will set the input unchecked
Angular Documentation
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
Related
I need to display below object of array in html table like that image. My data array like this.
data = [{id: 0 , name: 'one' , tags: ['a' , 'b' , 'c']} , {id: 1 , name: 'two', tags: ['r' , 't' , 'y']} , {id: 2 , name: 'three' , tags: ['a' , 'b' , 'c']} , {id: 3 , name: 'four' , tags: ['a' , 'b' , 'c']}]; .
So i tried like this but it's not working as expect on image.
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Tag Type</th>
<th scope="col">Tags</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tag of data; let i = index">
<td>{{ tag.id }}</td>
<table class="table">
<tr *ngFor="let el of tag.tags">
<td>{{el}}</td>
</tr>
</table>
<td>
<div align="center">
<a matTooltip="edit tag"><i>mode_edit</i></a>
</div>
</td>
</tr>
</tbody>
</table>
this is the result i got.Any idea how to do this?
I have made a few modifications into the code.
Instead of creating a new nested table,I have tried create separate rows in the main table. I have hid the TagType And Action, where it is not to be displayed based on the index.
For the striped pattern, I have added "table-striped" class to the table.
The Html code would look like this
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th scope="col">Tag Type</th>
<th scope="col">Tags</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let tag of data; let i = index">
<tr *ngFor="let el of tag.tags; let i2=index">
<td *ngIf="i2==0"> {{tag.id}} </td>
<td *ngIf="i2!=0"> </td>
<td> {{el}} </td>
<td>
<div align="center">
<a matTooltip="edit tag"><i>mode_edit</i></a>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
StackBlitz working demo: https://stackblitz.com/edit/angular-ivy-aqmrzy
How can I get v-for to display table data in the same form as the following html:
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Product ID</th>
<th></th>
</tr>
Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side.
<tr v-for="(column, index) in schema" :key="index">
<th scope="col">{{column}}</th>
</tr>
You just need to place v-for on the element you want to repeat, not it's parent.
For loop should be put on <th></th>
<tr>
<th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>
Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html
bind grid header and data separately.
<template>
<table>
<thead>
<tr>
<th v-for="(header,index) in gridHeader" :key="index">
{{header.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in gridData" :key="index" >
<td>
{{data.name}}
</td>
<td>{{data.age}}
</td>
<td>{{data.place}}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import Vue from 'vue';
export default class HelloWorld extends Vue {
private gridHeader: object[] = [
{name: 'Name', displayName: 'Name'},
{name: 'Age', displayName: 'Age'},
{name: 'Place', displayName: 'Place'}
];
private gridData: any =[{name:'Tony',age:'31',place:'India'},
{name:'Linju',age:'26',place:'India'},
{name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>
Currently, I have a angularjs table that looks like this.
Here is the code;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
console.log(row);
};
}]);
</script>
I would like the text "On" to appear beside each checkbox in each row whenever it is checked. The text "Off" will appear beside each checkbox in each row whenever it is unchecked.
I am using angularjs v1.
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">{{item.ON_OFF == 1 ? 'On' : 'Off'}}</td>
You can do this if you have AngularJS 1.1.5 or more
I have an angularjs table that looks like this:-
Here is the code below:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
console.log(row);
};
}]);
</script>
When the checkbox is unchecked. I want a hyperlink text "Link" containing the URL 127.0.0.1/{{item.SERIAL}} to appear beside the checkbox. When the checkbox is checked an ordinary text "Checked" will appear beside the checkbox.
I am using angularjs v1.
Try this,
Should change the ON_OFF value while click on check box.
$scope.rowSelected = function(row)
{
row.ON_OFF = (row.ON_OFF=='1')?'0':'1';
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">
<a ng-show="item.ON_OFF=='0'" ng-href="127.0.0.1/{{item.SERIAL}}">LINK</a>
<span ng-show="item.ON_OFF=='1'">CHECKED</span>
</td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
row.ON_OFF = (row.ON_OFF=='1')?'0':'1';
};
}]);
</script>
You can add conditional span checking value of the ON_OFF model like below:
<td>
<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">
<span ng-if="item.ON_OFF == '1'">Checked</span>
<span ng-if="item.ON_OFF != '1'"><a ng-href="127.0.0.1/{{item.SERIAL}}">Link</a></span>
</td>
I have some html code which uses angularjs to show a table. On this table, there is a checkbox on each row.
The table looks like this;
Here is the html code.
<div ng-app ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td>
</tbody>
</table>
</div>
Here is my angularjs controller code.
controller('CheckCtrl', ['$scope', '$http', 'configuration',
function ($scope, $http, $configuration) {
var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json";
$http.get(url_api).success(function(data)
{
$scope.check_items = data;
});
This is what I want. When a user clicks on a checkbox, information regarding all the items on that particular row belonging to the clicked checkbox is sent to a angualrjs controller function for processing. This information should include the Serial, Name, ID and new state of On/Off after clicking on the checkbox.
I am using angularjs v1 and twitter bootstrap.
EDIT: Edited the original question details to indicate that the row information should be sent whenever the checkbox is clicked and not only when the checkbox is enabled.
We can use ng-change to send row data to controller as object.
After that, you can retrieve row data as following:
var serial = row.SERIAL;
var name = row.NAME;
var id = row.ID;
var onOff = row.ON_OFF;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
console.log(row);
};
}]);
</script>
You can maybe use something like this,
HTML:
<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-change="checkSubmit(item.serial,item.name,item.id,item.on_off)">
JS:
function checkSubmit(serial,name,id,on_off){
...
/*Processing can happen now with the parameters obtained*/
...}
NOTE: The case of the variables may be wrong
Some modification to the answer provided by Natiq.
Modify this line
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-change="rowSelected(item)"></td>
to
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-click="rowSelected(item)"></td>
The modification is from ng-change to ng-click. This will solve your problem where the first click does not work but only subsequent clicks work based on the comments posted. Using ng-click ensures that every click will be detected.