I am using AngularJS framework, and I have 2 checkbox fields: when the first is false the second is disabled, the data are saved on the server as JSON and when I click edit it recives and fill the data.
What I want to do is when I have a data in the second field I want the first field to be checked and and the second field not disabled.
This is my code:
<tr>
<td>
<label class="checkbox i-checks col-lg-offset-1 pull-right"><input type="checkbox" ng-model="excelLaunchCheck" ng-checked="defobj.data.excelLaunch == true"><i></i></label>
</td>
<td>Excel</td>
<td>Launch</td>
<td>
<label class="checkbox i-checks col-lg-offset-1"><input type="checkbox" ng-model="defobj.data.excelLaunch" ng-disabled="!excelLaunchCheck"><i></i></label>
</td>
</tr>
now when I have data in the second field, the first field is checked, but the second field is still disabled, how do I enable it?
I don't know your structure of mappings, but try something like this :
<tr>
<td>
<label class="checkbox i-checks col-lg-offset-1 pull-right"><input type="checkbox" ng-model="excelLaunchCheck" ng-checked="defobj.data.excelLaunch == true"><i></i></label>
</td>
<td>Excel</td>
<td>Launch</td>
<td>
<label class="checkbox i-checks col-lg-offset-1"><input type="checkbox" ng-model="excelLaunchCheck" ng-disabled="defobj.data.excelLaunch == false"><i></i></label>
</td>
</tr>
Related
I'm trying to update checkbox value, when I try to check or uncheck the checkbox it doesn't update the ng-model value it persis
<tr height="44" ng-repeat="res in resources">
<td>{{res.project}}</td>
<td>{{res.resource}}</td>
<td><input type="text" placeholder="Resource Weightage" ng-model="res.alloc" ></td>
<td>
<input ng-checked="res.add==1 || isAllSelected" type="checkbox" checklist-value="res.add" checklist-model="res.add">
</td>
<td>
<input ng-checked="res.edit==1 || isAllSelected" type="checkbox" checklist-value="res.edit" checklist-model="res.edit">
</td>
<td>
<input ng-checked="res.delete==1 || isAllSelected" type="checkbox" checklist-value="res.delete" checklist-model="res.delete" >
</td>
<td>
<input ng-checked="res.view==1 || isAllSelected" type="checkbox" checklist-value="res.view" checklist-model="res.view">
</td>
</tr>
Screen Shot of Request is here
According to docs of checklist directive
It's necessary to set to checklist-model array that will contain values, but in the checklist-value it's necessary to put the value that will be pushed to the array.
in other words it should be like that
<input type="checkbox" checklist-value="'some value'" checklist-model="someTargetArray">
I suppose you should use simple checkbox with ng-model like
<input type="checkbox" ng-model="res.view">
I am assuming using this plugin. so according to the example in the link you need to pass value of your input bot in checklist-value and you don't need ng-checked.
Here i am assuming you want an res to contain an array like ['add','edit','delete','view'] when checkboxes are selected.
<tr height="44" ng-repeat="res in resources">
<td>{{res.project}}</td>
<td>{{res.resource}}</td>
<td>
<input type="text" placeholder="Resource Weightage" ng-model="res.alloc"></td>
<td>
<input type="checkbox" checklist-value="'add'" checklist-model="res">
</td>
<td>
<input type="checkbox" checklist-value="'edit'" checklist-model="res">
</td>
<td>
<input type="checkbox" checklist-value="'delete'" checklist-model="res" >
</td>
<td>
<input type="checkbox" checklist-value="'view'" checklist-model="res">
</td></tr>
hey guys thanks for your support but unfortunately no solution worked for me rather I've tried another solution that's worked for me
in view
<input ng-true-value='1' ng-false-value="0" ng-checked="res.add==1 || isAllSelected" value="1" ng-change="update($index,res,'a')" type="checkbox" ng-model="res.add">
and in controller
$scope.update = function(index,data,crud) {
if (crud=="a") {
$scope.resources[index].add = data.add;
} else if (crud=="e") {
$scope.resources[index].edit = data.edit;
} else if (crud=="d") {
$scope.resources[index].delete = data.delete;
} else if (crud=="v") {
$scope.resources[index].view = data.view;
}
};
this solved my problem now I can get updated value of check boxes.
I've got a table of packages produced by ng-repeat. I'm using bootstrap validation. It works fine on pages where there's only one record requiring input, but here I'm dealing with a repeater.
<form name="packingVm.PackageForm" ng-submit="packagingVm.ShipNow()" novalidate ng-init="submitted=false">
<table>
<thead>
<tr>
<th>Package Id</th>
<th>Width</th>
</tr>
</thead>
<tbody data-ng-repeat="package in packagingVm.Packages track by $index">
<tr>
<td>{{package.Id}}</td>
<td class="col-xs-1">
<input name="Width" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
<div class="error-message" ng-show="packagingVm.PackageForm.Width.$invalid && packagingVm.PackageForm.Width.$touched || package.submitted">
<span ng-show="packagingVm.PackageForm.Width.$error.required">Required.</span>
</div>
</td>
</tr>
</tbody>
</table>
</form>
What's happening is the rows are locked together. Getting an error on one row shows the error message on all rows.
I mean, I get why - I only have one packagingVm.PackageForm.Width, not one per row - but I don't know how to fix it.
Searching for bootstrap required ng-repeat isn't getting me much joy.
Answered here:
AngularJS required field validation in ng-repeat
Make the control name, and all references to it, dynamic, by adding {{$index}} to it, thus:
<tbody data-ng-repeat="package in packagingVm.Packages">
<tr>
<td>{{package.Id}}</td>
<td class="col-xs-1">
<input name="Width_{{$index}}" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
<div class="error-message" ng-show="packagingVm.PackageForm.Width_{{$index}}.$invalid && packagingVm.PackageForm.Width_{{$index}}.$touched || package.submitted">
<span ng-show="packagingVm.PackageForm.Width_{{$index}}.$error.required">Required.</span>
</div>
What I can see, you are using the repeat for packagingVm.Packages but the required parts are dependent on packagingVm.PackageForm. You should have the specific required properties for each package(input). Else for all the inputs, one property of the controller is changed on which all required divs are dependent. So it shows for all the inputs.
I am new to AngularJS. I would like to know how to track which all radio buttons and checkboxes were clicked or selected on clicking the submit button. The tables rows were created using ng-repeat. The checkboxes(as seen in the image) appear when the radio button in the third column is clicked(I do an ng-show="true") and can be selected.
Attached is a mockup.
Any good design pattern or sample code as well for this use case?
Please help.
Thanks in advance.
EDIT: Adding sample code.
<tr ng-repeat="event in data">
<td><input type="radio" name={{event.performanceID}}
ng-value="yes" /></td>
<td><input type="radio" name={{event.performanceID}} ng-value="no" />
</td>
<td><input type="radio" name={{event.performanceID}}
ng-value="maybe" />
<div class="checkbox">
<label> <input type="checkbox"> Approve
</label> <label> <input type="checkbox"> Bonuses
</label>
</div></td>
<td><img
ng-src="http://google.com/images/{{ event.imageName }}.jpg"
style="height: 100px; width: 100px" /></td>
<td>
<div>
<h4>Persons Name</h4>
<h5>{{event.Ename}}</h5>
</div>
<div>
<h4>Address</h4>
<h5>XXXXXXXXXXXXXX</h5>
</div>
</td>
</tr>
In My application, there are 24 checkboxes.
Do I need to find out all the page objects for 24 objects?
EDIT Below is the HTML :
<td>Gender</td>
<td class="text-center"><i class="fa fa-check text-success" />
</td>
<td class="text-center">
<input class="ng-pristine ng-untouched ng-valid" type="checkbox" ng-checked="permission.friendGender" ng-model="permission.friendGender" />
</td>
<td class="text-center">
<input class="ng-pristine ng-untouched ng-valid" type="checkbox" ng-checked="permission.anyoneGender" ng-model="permission.anyoneGender" />
</td>
I am not privileged to comment on question directly, hence posting a possible solution.
I am not sure how your check boxes are structured in HTML. But if your checkbox is with single unique ID having 24 different options, then you can do something similar to :
List<WebElement> CHECKBOXlist = driver.findElements(By.cssSelector("input[type='checkbox']"));
for(WebElement checkbox : CHECKBOXlist)
{
//do something with each checkbox.
System.out.println(checkbox.getText());
checkbox.click();
}
Here you are literally getting all checkboxes with driver.findElements() instead of driver.findElement() (in your case, those 24 check boxes)
Following is my code snippet:
<tr height="30" id="user_option">
<td width="300">
<input type="checkbox" id="users" name="users" value="users"/>Users
</td>
<td> <input type="checkbox" id="upload_from_file" name="upload_from_file" value="upload_from_file"/>Upload From File
</td>
<td>
<input type="checkbox" id="copy_paste_from_excel" name="copy_paste_from_excel" value="copy_paste_from_excel"/>Copy paste from excel
</td>
</tr>
This is a code from smarty template. Actually when I submit this form I want an array containing the checkbox values so in order to achieve that I have to use same name for these checkboxes. But I'm not able to name thes checkboxes in such a manner that I could get all the selected checkboxes' value in one single array after form submission. Can you help me in achieving this? Thanks in advance.
Define the name attribute of checkboxes to be an array:
<input type="checkbox" id="id1" name="cb_data[var_name1]" value="some_val"/>
<input type="checkbox" id="id2" name="cb_data[var_name2]" value="another_val"/>
then check the $_POST['cb_data'] array.