I have on table with 3 colums.There is no required field in my table.
when I click on save button each row should be save as separate object in a single array.
1.If document is not uploaded ,that can be empty.2.checkbox is checked it should be true otherwise false. 3.But Name should be in each object.
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa'
},{
'name': 'bbb'
},{
'name': 'ccc'
}];
$scope.saveDetails = function(doc) {
if ($('#status').is(':checked')) {
doc.status = 'true'
} else {
doc.status = 'false'
}
console.log(doc)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
Any help?Thanks!!
you dont need to jquery methods
try follwing:
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa',
file: "",
status:false
},{
'name': 'bbb',
file: "",
status:false
},{
'name': 'ccc',
file: "",
status:false
}];
$scope.saveDetails = function(doc) {
console.log($scope.listName)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
Related
here i am trying to select all check boxes by using ngOnit but it is calling that function and by clicking it is calling the function then it is selecting all
.html code
<div>
<h2>Hello Angular2</h2>
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Size</th>
<th>Diameter</th>
<th class="text-center">
<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let size of sizes ; let i = index">
<td class="text-right">{{i + 1}}</td>
<td class="text-right">{{size.size}}</td>
<td>{{size.diameter}}</td>
<td class="text-center">
<input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>
</td>
</tr>
</tbody>
</table>
</div>
.ts code:
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km' },
{ 'size': '1', 'diameter': '32000 km' }
];
checkAll(ev) {
this.sizes.forEach(x => x.state = ev.target.checked)
}
isAllChecked() {
debugger;
return this.sizes.every(_ => _.state);
}
ngOnInit() {
this.isAllChecked();
}
below is my stack blitz url
https://stackblitz.com/edit/angular-pzvusr
your code is working fine. missing thing is you don't have a key state: true in your defined array. that's why it is not selecting all checkbox.
try this array
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km', 'state': true },
{ 'size': '1', 'diameter': '32000 km', 'state': true }
];
<div>
<h2>Hello Angular2</h2>
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Size</th>
<th>Diameter</th>
<th class="text-center">
<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let size of sizes ; let i = index">
<td class="text-right">{{i + 1}}</td>
<td class="text-right">{{size.size}}</td>
<td>{{size.diameter}}</td>
<td class="text-center">
<input type="checkbox" name={{sizecb + i}} value="{{size.id}}"
(change)="sizes[i].state = !sizes[i].state" [checked]="size.state" [(ngModel)]="size.state"/>
</td>
</tr>
</tbody>
</table>
</div>
and in ts
try this array
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km', 'state': true },
{ 'size': '1', 'diameter': '32000 km', 'state': true }
];
I want to dynamically show and hide table row details on every button click, but every time I click on span glyphonic icon all tr's details data are open by default .what should i change to make visible this data only for those elements on which i have clicked? ( in my case i need to make visible only certain data on which user has clicked):
<form role="form">
<script cam-script type="text/form-script">
$scope.selectedRow = null;
var persons = $scope.persons = [
{
"id": 1,
"name": "name1",
"age":"454",
"description":"this is simple name"
} ,
{
"id": 2,
"name": "name2",
"age":"4543",
"description":"this is simple name"
},
{
"id": 3,
"name": "name2",
"age":"4543",
"description":"this is simple name"
}
];
camForm.on('form-loaded', function() {
camForm.variableManager.createVariable({
name: 'persons',
type: 'Array',
value: persons
});
});
$scope.pageNumber = 0;
$scope.IsHidden=true;;
$scope.setPageNumber = function(index) {
$scope.pageNumber = index;
$scope.IsHidden = $scope.IsHidden ? false : true;
}
</script>
<div class="container">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="item in persons " >
<tr >
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-default btn-xs" ><span class="glyphicon glyphicon-eye-open" ng-class="{$index == pageNumber }" ng-click="setPageNumber($index)($index)"></span></button></td>
</tr>
<tr ng-hide="IsHidden">
<td>
<label for="id" class="control-label">details</label>
<div class="controls">
<input id="description" class="form-control" type="text" ng-model="item.description" required readonly/>
</td>
</tr>
</tbody>
</table>
</div>
</form>
Here' the code you are looking for
var myApp = angular.module('myApp',[]);
myApp.controller('myController', ['$scope', function($scope) {
$scope.persons = [
{
"id": 1,
"name": "name1",
"age":"454",
"description":"this is simple name1"
} ,
{
"id": 2,
"name": "name2",
"age":"4543",
"description":"this is simple name2"
},
{
"id": 3,
"name": "name2",
"age":"4543",
"description":"this is simple name3"
}
];
$scope.toggle = function (index){
if($scope.persons[index].hidethis == undefined){
$scope.persons[index].hidethis = true;
}else{
$scope.persons[index].hidethis = !$scope.persons[index].hidethis;
}
}
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="myController">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="item in persons">
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-default btn-xs" ng-click="toggle($index)"></button></td>
</tr>
<tr id="{{hideid + $index}}" ng-show="item.hidethis">
<td>
<label for="id" class="control-label">details</label>
<div class="controls">
<input id="description" class="form-control" type="text" ng-model="item.description" required readonly/>
</div>
</td>
</tr>
</tbody>
</table>
</form>
I would like to know how to get the table row values for the selected row in the below plunkr. On selecting a row using checkbox in table and click on update button, i need row id, row name, row values. Here is the plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview
html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
<thead style="border-bottom: 1px solid #AAA">
<tr>
<th style="width:50%"> <input type='checkbox'/> catalog</th>
<th style="width:25%">currentVersion</th>
<th style="width:25%">new Version</th>
</tr>
</thead>
<tbody style="color: #007db8;">
<tr id='1' name='MT' >
<td style="width:50%">
<input type='checkbox' /> Multiple
</td>
<td style="width:25%">1.2</td>
<td style="width:25%">1.3</td>
</tr>
</tbody>
</table>
<button style="font-size: 11px;" type="button" class="btn btn-primary" >Update</button>
</body>
</html>
You have many alternatives to get the value of each row, here an option using ng-repeat and ng-model
angular.module('test', [])
.controller('test', function ($scope) {
$scope.itemSelecteds = {};
$scope.dummyModel = {};
$scope.items = [{
id: 1,
name: 'mit',
catalog: 'Multiple',
currentVersion: '1.2',
newVersion: '1.3',
}, {
id: 2,
name: 'mit',
catalog: 'Multiple',
currentVersion: '1.2',
newVersion: '1.3',
}, {
id: 3,
name: 'mit',
catalog: 'Multiple',
currentVersion: '1.2',
newVersion: '1.3',
}];
$scope.selectItem = function (item) {
// If checkbox is checked
if ($scope.dummyModel[item.id]) {
$scope.itemSelecteds[item.id] = item;
} else {
delete $scope.itemSelecteds[item.id];
}
}
$scope.update = function () {
console.log($scope.itemSelecteds);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="test">
<table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
<thead style="border-bottom: 1px solid #AAA">
<tr>
<th style="width:50%"> <input type='checkbox'/> catalog</th>
<th style="width:25%">currentVersion</th>
<th style="width:25%">new Version</th>
</tr>
</thead>
<tbody style="color: #007db8;">
<tr ng-repeat="item in items" ng-attr-id="item.id">
<td style="width:50%">
<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/> {{ item.catalog }}
</td>
<td style="width:25%">{{ item.currentVersion }}</td>
<td style="width:25%">{{ item.newVersion }}</td>
</tr>
</tbody>
</table>
<button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()" >Update</button>
</body>
Use the ng-checked event to get on check event but if you want to process both check and unchecked event try ng-click
Here this will give you input element .From which you can use elemnt.parent.parent to get td or tr and their values
function doSomething(element){
var parent=elemnt.parent.parent;
// do something
}
i m just learn vue.js
and i want to display a table data.my opinion is when display mode the table just show. and when i click edit button of the line of the table, i want this line convert to model.
this is my code:
```
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<template v-for="data in apidata" track-by="$index">
<tr>
<td>{{$index + 1}}</td>
<td>
<div v-show="data.editmode"><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</template>
</tbody>
</table>
```
my data is like this
[{name:'test', pass:'1'}, {name:'test2', pass:'2'}]
i bind a edit()function to listen the click event.
edit: function(data){
alert(data.editmode);
data.editmode = true;
}
i think when i click .becuase the data.editmode will change to true.
this line will convert to input mode . but its useless.
i have tried v-if=data.editmode , v-if="data.editmode" ,v-show="data.editmode" , still got nothing
i dnt know why?
You just need to include editmode in your data declaration so that it is a reactive data item.
new Vue({
el: 'body',
data: {
apidata: [{
name: 'test',
pass: '1',
editmode: false
}, {
name: 'test2',
pass: '2',
editmode: false
}]
},
methods: {
edit: function(data) {
data.editmode = !data.editmode;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr v-for="data in apidata">
<td>{{$index + 1}}</td>
<td>
<div v-if="data.editmode">
<input v-model="data.name">
</div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode>
<input v-model="data.pass">
</div>
<div v-else>{{data.pass}}</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</tbody>
</table>
I am trying to show the same select with the same values and functions on a table. I am using the foreach binding to bind to my table objects. Here is what my code looks like:
<table class="table table-bordered" >
<thead>
<tr>
<th>Nextable Name</th>
<th>POS Name</th>
</tr>
</thead>
<tbody data-bind="foreach: tables">
<tr>
<td data-bind="text: name"></td>
<td><select class="select2 span8 dropdown" data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select></td>
</tr>
</tbody>
</table>
For some reason, the dropdowns all say undefined and are not selectable at all. I inspect the page and the dropdown elements and they all have the correct options and values inside as if this worked, but it doesn't. Any help much appreciated!
Is this what you want it to do?
var vm = {
omnivoreTables: [
{name: 'One',
id: '1'},
{name: 'Two',
id: '2'}
],
selectedOmnivoreTableId: ko.observable(1),
tables: ko.observableArray([
{name: 'First'},
{name: 'Second'},
{name: 'Third'}
])
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Nextable Name</th>
<th>POS Name</th>
</tr>
</thead>
<tbody data-bind="foreach: tables">
<tr>
<td data-bind="text: name"></td>
<td>
<select class="span8 dropdown" data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select>
</td>
</tr>
</tbody>
</table>