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
Related
I want to track the expanded row and save that form with city and work details, the problem is while clicking on the particular row it's expanding with form but I can't able to track that row...
var app = angular.module('app', ['ngAnimate']);
app.controller('itemsController', function( $scope ) {
$scope.divisions = [{id:12, div_name:' city1'},
{id:13, div_name:' city2'},
{id:14, div_name:' city3'}];
$scope.works =[{wid:111, w_name:'work1'},
{wid:222, w_name:'work2'},
{wid:333, w_name:'work3'}];
});
html
<div ng-controller="itemsController" class="box">
<table border="1">
<tbody ng-repeat-start="division in divisions">
<td>
{{division.div_name}}
<em>{{expanded}}</em>
</td>
<td>Values: {{divisions.length}}</td>
<td>
<button type="button" ng-click="expanded = !expanded">
Expand
</button>
</td>
</tbody>
<tbody ng-repeat-end ng-show="expanded">
<td colspan="3">
<select ng-model="result.division.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works">
{{work.w_name}} <input type=text />
</ul><br/><br/>
<button ng-click="save()">save</button>
</td>
</tbody>
</table>{{result |json}}
link - http://jsfiddle.net/raju10281/eqk6attx/18/
Thank You in advance!!!
Try this solution. You should create object(ng-init='data={}') for each ng-repeat. It will present content of each form, then you can use it inside your controller(ng-click="save(division, data)") with appropriate division:
<tbody ng-repeat-end ng-show="expanded" ng-init='data={id:division.id,div_name:division.div_name,works:[]}'>
<td colspan="3">
<select ng-model="data.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works" ng-init='data.works[$index]={wid:work.wid,w_name:work.w_name}'>
{{work.w_name}} <input type=text ng-model='data.works[$index].input' />
</ul><br/><br/>
<button ng-click="save(division, data)">save</button>
</td>
</tbody>
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
<form id="form">
<table id="VIPs" width="400">
<tbody>
<tr id="heading">
<tr>
<td>
<input id="VIP" type="radio" name="VIP" value="1" checked="true"/>
</td>
<td>Sylvester</td>
<td>Stallone</td>
<td>Male</td>
<td>Movie</td>
</tr>
<tr>
<td>
<td>Elvis</td>
<td>Presley</td>
<td>Male</td>
<td>Music</td>
</tr>
<tr>
<td>
<td>Marie</td>
<td>Curie</td>
<td>Female</td>
<td>Science</td>
From the above code snippet how can I click a radio button corresponding to a specific name using selenium java ?
You can do this:
driver.findElement(By.cssSelector("input[name='VIP']")).click()
which will eventually clicks the radio button.
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>
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)