How to set checked property of checkboxes based on value from database using angular js

Pankti Patel

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">*&nbsp;</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="{{names.Id}}" ng-model="names.SELECTED" ng-checked="object[names.Id]" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" ng-change="getSelectedMetal()" />{{names.Name}}
                </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">*&nbsp;</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">*&nbsp;</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">*&nbsp;</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="{{names.Id}}" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />{{names.Name}}
                </div>
            </div>
        </div>
    </div>
    <div class="row" >
        <div class="col-sm-2">
            <label>Select Metal :</label><label style="color:red">*&nbsp;</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="{{names.Id}}" ng-model="names.SELECTED" ng-checked="object[names.Id]" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" ng-change="getSelectedMetal()" />{{names.Name}}
                </div>
            </div>
        </div>
    </div>
    <div class="row" ng-show="showMetalTone">
        <div class="col-sm-2">
            <label>Select Metal Tone:</label><label style="color:red">*&nbsp;</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="{{names.Name}}" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />{{names.Name}}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <label>Select Stone :</label><label style="color:red">*&nbsp;</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="{{names.Id}}" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />{{names.Name}}
                </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>{{item.WebsiteName}}</td>
                <td>{{item.WebsiteCode}}</td>
                <td>{{item.Business_Name}}</td>
                <td>{{item.Metal_Name}}</td>
                <td>{{item.MetalTone_Name}}</td>
                <td>{{item.Stone_Name}}</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.

Ujjwala Bollam

In edit for your input type checkbox add a ng-checked condition where you have to pass the value true if it is stored in database else false. If true then the checkbox gets checked.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Laravel set checkboxes checked based on database value

From Dev

how to set checkbox checked based on value in one array and add value to another array if checked otherwise remove using angular js?

From Dev

How to set default value checked in a checkbox from database using AngularJS

From Dev

How to set "CheckBoxes" to checked from treeview using javascript?

From Dev

Check multiple Checkboxes based on the value from database using classic asp

From Dev

How to determine “Checked” value for Checkboxes (from GetAppearanceStates)

From Dev

How to set input field value when check box is checked using Angular.js

From Dev

How to show checkboxes as checked when values are set in the database in Laravel

From Dev

Set checkboxes as checked using angularjs

From Dev

Set 'checked' to value from database radio input

From Dev

Set property value from database

From Dev

Set CheckBox Checked based on CheckBoxes of a GroupBox

From Dev

Set CheckBox Checked based on CheckBoxes of a GroupBox

From Dev

Set checkboxes to checked based on Ajax GET request

From Dev

How to pass the values of multiple checkboxes checked value using JQuery to a URL

From Dev

How to set Spinner value based on value from database?

From Dev

How to remove an element from a Set based on a property value?

From Dev

Getting checkboxes ticked based on the value extracted from database for edit form

From Dev

display Value from database based on Checkbox checked on the same form

From Dev

Get the First Value from array of checked checkboxes

From Dev

How to get the checkboxes value in checked order in php

From Dev

How to sort checkboxes by class, value, and checked

From Dev

how to set a property of an instance based on the value of a string?

From Dev

How to count the number of checkboxes checked using an array

From Dev

How to mark checked all checkboxes from jquery

From Dev

Getting checked checkboxes in angular

From Dev

How to set selectize.js value programatically using Angular?

From Dev

How to retrieve radio button value from database in checked state in jsp

From Dev

How to set the "checked" value of a React switch to a reference in React Js?

Related Related

  1. 1

    Laravel set checkboxes checked based on database value

  2. 2

    how to set checkbox checked based on value in one array and add value to another array if checked otherwise remove using angular js?

  3. 3

    How to set default value checked in a checkbox from database using AngularJS

  4. 4

    How to set "CheckBoxes" to checked from treeview using javascript?

  5. 5

    Check multiple Checkboxes based on the value from database using classic asp

  6. 6

    How to determine “Checked” value for Checkboxes (from GetAppearanceStates)

  7. 7

    How to set input field value when check box is checked using Angular.js

  8. 8

    How to show checkboxes as checked when values are set in the database in Laravel

  9. 9

    Set checkboxes as checked using angularjs

  10. 10

    Set 'checked' to value from database radio input

  11. 11

    Set property value from database

  12. 12

    Set CheckBox Checked based on CheckBoxes of a GroupBox

  13. 13

    Set CheckBox Checked based on CheckBoxes of a GroupBox

  14. 14

    Set checkboxes to checked based on Ajax GET request

  15. 15

    How to pass the values of multiple checkboxes checked value using JQuery to a URL

  16. 16

    How to set Spinner value based on value from database?

  17. 17

    How to remove an element from a Set based on a property value?

  18. 18

    Getting checkboxes ticked based on the value extracted from database for edit form

  19. 19

    display Value from database based on Checkbox checked on the same form

  20. 20

    Get the First Value from array of checked checkboxes

  21. 21

    How to get the checkboxes value in checked order in php

  22. 22

    How to sort checkboxes by class, value, and checked

  23. 23

    how to set a property of an instance based on the value of a string?

  24. 24

    How to count the number of checkboxes checked using an array

  25. 25

    How to mark checked all checkboxes from jquery

  26. 26

    Getting checked checkboxes in angular

  27. 27

    How to set selectize.js value programatically using Angular?

  28. 28

    How to retrieve radio button value from database in checked state in jsp

  29. 29

    How to set the "checked" value of a React switch to a reference in React Js?

HotTag

Archive