I have a group of checkboxes which are populated dynamically from database using AngularJs. Now, on edit I want to check the checkboxes whose value is stored in database. Below is the sample code:
<div class="row" >
<div class="col-sm-2">
<label>Select Metal :</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in MetalTypes" class="checkbox-inline" id="MetalDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="" ng-model="names.SELECTED" ng-checked="object[names.Id]" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" ng-change="getSelectedMetal()" />
</div>
</div>
</div>
</div>
I have a table which displays rows of database table. The table also contains an edit button at each row. On clicking the edit button the values should get auto populated in the form. Everything else is working fine, but, I am not able to set the checkboxes as checked which are saved in database.
HTML Code:
<div class="row" id="domainForm">
<div class="row">
<div class="col-sm-2">
<label style="color:red">* </label><label>Domain Name :</label>
</div>
<div class="col-sm-4">
<input id="domainName" type="text" placeholder="Enter the name of Domain" value=""/>
</div>
<div class="col-sm-2">
<label style="color:red">* </label><label>Domain Code :<br/>[Alias Name]</label>
</div>
<div class="col-sm-4">
<input id="aliasDomainName" type="text" placeholder="Enter the code/alias name for Domain" value=""/>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-sm-2">
<label>Select Business Type :</label><label style="color:red">* </label>
</div>
<div class="col-sm-4">
<div ng-repeat="names in BusinessTypes" class="checkbox-inline" id="BusinessDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-2">
<label>Select Metal :</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in MetalTypes" class="checkbox-inline" id="MetalDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="" ng-model="names.SELECTED" ng-checked="object[names.Id]" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" ng-change="getSelectedMetal()" />
</div>
</div>
</div>
</div>
<div class="row" ng-show="showMetalTone">
<div class="col-sm-2">
<label>Select Metal Tone:</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in MetalToneTypes" class="checkbox-inline" id="MetalToneDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label>Select Stone :</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in StoneTypes" class="checkbox-inline" id="StoneDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<input type="button" value="Add Domain" ng-click="AddDomain()" />
</div>
<div class="col-sm-3">
<input type="button" value="Set Margin" data-toggle="modal" data-target="#myModal" />
</div>
</div>
</div>
<div class="row" style="margin-top:10px;">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Domain Name</th>
<th>Alias Name</th>
<th>Business Type</th>
<th>Metal(s)</th>
<th style="width:35%">Metal Tone(s)</th>
<th>Stone(s)</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in domainList">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><button class="btn btn-sm btn-primary" ng-click="setDomainDetails(item)">Edit</button></td>
</tr>
</tbody>
</table>
</div>
I want to show checkboxes of "domainForm" as checked in it's edit mode. Please Help.
Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire