I have created a table from 2 different arrays in AngularJS that contain employees name and services and rest of the cells contain Checkboxes now I want get the ID's of selected Checkboxes that I have created another array in the controller,
but the view allows me to select only one Checkbox from many in the row
here is my Html
<form ng-submit="save()">
<table border="1">
<tr>
<td><strong>Services</strong></td>
<td ng-repeat="e in PBA">{{e.Name}}</td>
</td>
<tr ng-repeat="(index,i) in SOB">
<td>{{i.Name}}</td>
<td ng-repeat="e in PBA track by $index">
<input type="checkbox" name="cb" ng-true-value="{{e.Id}}_{{i.Id}}" ng-model="ids[index]" />
</td>
</tr>
</table>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" />
</div>
</form>
Related
"I've displayed 20 records in navigation tab and against each records I've added coloumn for checkbox. My requirement is if user selects records (row) 1, 4, 8 using checkbox and click on "Edit" button on top of Navigation tab then it should display on Modal screen so that user can edit it.
if he/she selects records 5, 8, 6 then records should be display in that particular order.
I google it but couldn't find any related posts.
Below is my HTML code:
<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid">
<div class="input-group">
<ul class="nav nav-tabs">
<li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li>
</ul>
<table class="table">
<thead>
<tr>
<th>
Select
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse ">
<td>
<input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" />
</td>
<td>{{ record.Test1 }}</td>
<td>{{ record.Test2 }}</td>
<td>{{ record.Test3 }}</td>
</tr>
</tbody>
</table>
</div>
following is my AngularJs code for populating the navigation tab
$http.get(pageBaseUrl + "api/records").success(function (records) {
$scope.Records = records;
$scope.IsLoading = false;
});
Below is the code of Button and Modal screen:
<div class="input-group">
<button type="button" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
</div>
<div id="editRecords" class="modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h2>Edit Data For Selected Records </h2>
</div>
<div class="modal-body">
<table class="table-condensed table-striped">
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="SaveRecords();">Save Records</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="UnmarkForEdition()">
Cancel
</button>
</div>
</div>
</div>
</div>
Thanks for the code, here is my solution,
JSFiddle Demo
Issues:
First I check if the object contains any selected checkboxes using the code.
$scope.checkCheckbox = function(){
return $filter('filter')($scope.Records, {Selected: true}).length === 0;
}
In the above code, I check the ng-repeat array if there is any object containing the property Selected:true, if there are none, then the length will be zero which using a comparator operator, I return a boolean. This is used by the HTML element button attribute ng-disabled and disables the input.
<button type="button" ng-disabled="checkCheckbox()" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
When the edit multiple records, button is clicked, I open the modal, and in the code I have added a simpleng-if` which will show only the inputs where the checkbox is selected!
<tr ng-if="record.Selected" ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
Let me know if this fixes the issue.
I have a table that's populated with records from an object retrieved from a service captured using AngularJS. I have checkbox in the table that enables that row to be edited. Within the row, I have a select box that I need to have its default value set to the original value in the row when I click the "Edit" checkbox in the row while still populating the select with all the other values from which to choose.
Below is the code that's populating the table and the select box.
<thead>
<tr>
<th class="col-lg-2">Sub Program</th>
<th class="col-lg-6">Description</th>
<th class="col-lg-2">Program</th>
<th class="col-lg-1">Edit</th>
<th class="col-lg-1">Update/Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="timeAllocationSubProgram in timeAllocationSubPrograms">
<td ng-hide="checked">{{timeAllocationSubProgram.subProgramName}}</td>
<td ng-hide="checked">{{timeAllocationSubProgram.subProgramDescription}}</td>
<td ng-hide="checked">{{timeAllocationSubProgram.programName}}</td>
<td ng-show="checked">
<input class="form-control" value="{{timeAllocationSubProgram.subProgramName}}"
ng-model="timeAllocationSubProgram.subProgramName" />
</td>
<td ng-show="checked">
<input class="form-control" value="{{timeAllocationSubProgram.subProgramDescription}}"
ng-model="timeAllocationSubProgram.subProgramDescription" />
</td>
<td ng-show="checked">
<select class="form-control" ng-options="timeAllocationProgram as timeAllocationProgram.programName
for timeAllocationProgram in timeAllocationPrograms track by timeAllocationProgram.programName" ng-model="timeAllocationProgram"
ng-change="selectProgram(timeAllocationProgram)"></select>
</td>
<td>
<input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"/>
</td>
<td>
<button class="btn btn-xs btn-primary" ng-click="editTimeAllocationSubProgram(timeAllocationSubProgram)"
ng-show="checked">
Update
</button>
<button class="btn btn-xs btn-primary" ng-click="deleteTimeAllocationSubProgram(timeAllocationSubProgram)"
ng-hide="checked">
Delete
</button>
</td>
</tr>
</tbody>
</table>
With my humble experience, the best way to set default value to inputs linked to ng-model in Angular, is simply setting the default value to the ng-model.
ng-options is here remplacing
<options ng-repeat="timeAllocationProgram in timeAllocationPrograms">
Consequently, if timeAllocation (as it's what is written in ng-model directive) is set to the default value you want when you load the data from the service, it should display it right.
The subject seems to have been already answered as well, here's the link, with a plunker :
how to use ng-option to set default value of select element
I have the following sample model:
{
a:{
x:0,
z:0,
f:1
},
b:{
x:"a",
u:"b"
}
}
Which I render into two different tables
<div class="col-sm-5">
<h1>A</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.a">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
<div class="col-sm-5 col-md-offset-2">
<h1>B</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.b">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
The tables are dynamic, which means I can add new rows to it.
Now when I change any values inside the table, they aren´t synchronized with the model -> Editing not possible
What do I need to do to store changes automatically in the original
model?
If this is not possible, how can I get a Json Schema from my table
like the one the tables are rendered from, so that I only have to
overwrite the old one?
First off you can't dynamically change an object property name or key. So what you are trying to do with ng-model="key" simply won't work.
As far as the value part you should be using the object reference in your ng-model
<tr ng-repeat="(key,value) in schema.b">
<td>{{key}}</td>
<td>
<input type="text" ng-model="schema.b[key]" required>
</td>
<td></td>
</tr>
if you need to be able to edit the key then you need to change your data structure to an array of objects with each object having the same property names for keys
I'm trying to do form validation with Angular. The problem is that my form's inputs are within a ng-reapeat and they have the same name. So if one required field is not filled, the others are also shown as not valid.
To workaround this, I've used an inner ng-form as shown below. But the validation is not triggered.
Any idea what I'm doing wrong ?
<form name="referenceForm" >
<table>
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
<ng-form name="urlForm">
<tr>
<td>
<input name="urlName" type="text" ng-model="ref.reference.urlName" ng-disabled="ref.reference.isScreenDeleted" required />
<span ng-show="urlForm.urlName.$error.required">*</span>
</td>
<td>
<input name="shortName" type="text" ng-model="ref.reference.shortName" ng-disabled="ref.reference.isScreenDeleted" required />
<span ng-show="urlForm.shortName.$error.required">*</span>
</td>
<td>
<a class="btn grid-button grid-edit-row btn-danger" ng-if="!ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-trash-o"></i></a>
<a class="btn grid-button grid-edit-row btn-info" ng-if="ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-refresh"></i></a>
</td>
</tr>
</ng-form>
</tbody>
</table>
</form>
It is not a good idea to put something in the table that is not inside .
Never know how it will work out.
Place ng-form as an attribute on tag instead.
So you should replace this:
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
<ng-form name="urlForm">
With this:
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}" ng-form="urlForm">
I'm working on a small 'Shopping Site' college project...I had created everything but stucked at one Problem.
There is a content part aligned center in my page where i have a table for Product name,Price and Add to cart in consecutive rows...
<div id="Content">
<table id="ContentTable">
<tr>
<td id="iphone5"><img class="thumbnail" src="mobile_img/iphone-5.jpg"></td>
<td><img class="thumbnail" src="mobile_img/Lumia-920.jpg"> </td>
<td><img class="thumbnail" src="mobile_img/blackberry-curve-9300.jpg"> </td>
<td><img class="thumbnail" src="mobile_img/header.jpg"> </td>
</tr>
<tr>
<td>$ 5767435</td>
<td> $ 2343456</td>
<td> $ 123123</td>
<td>$ 345345</td>
</tr>
<tr class="productdetails">
<td>Add to my cart</td>
<td>Add to my cart</td>
<td>Add to my cart</td>
<td>Add to my cart</td>
</tr>
</table>
</div>
Problem is that, how could i attach product details to 'Add to cart' link below them and send them to other page, which is to be stored in database when 'Add to Cart' below them is clicked...
well you can make a seperate table in database containing the item id,item name or link to the image (or any other way to store images), and the price.
in the page where you want to display, pull the values from the database and put it in a form. so that it would look like:
<form name="something" action="Add_to_Cart.jsp" method="post">
<tr>
<td><input type="checkbox" name="item" value="<%item_id%>"></td>
<td><%Image link/item name 1%></td>
<td><%price 1%></td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="<%item_id%>"></td>
<td><%Image link/item name 2%></td>
<td><%price 2%></td>
</tr>
.
.
.
and finally at the end a submit button with showing Add to Cart..
<input type="submit" name="Getthis" value="Add to Cart"/>
</form>
and then retrive the values like this
String items[]= request.getParameterValues("item");
look for reference: http://www.devmanuals.com/tutorials/java/jsp/multiplecheckbox.html
so now you will have the id's of the item selected and can easily add to cart..
(ps. the codes are just snippets)