如何使用角度js根据数据库中的值设置复选框的选中属性

Posted 2023-05-09

【中文标题】如何使用角度js根据数据库中的值设置复选框的选中属性

【英文标题】：How to set checked property of checkboxes based on value from database using angular js

【发布时间】：2018-05-04 18:13:26

【问题描述】：

我有一组使用 AngularJs 从数据库动态填充的复选框。现在，在编辑时，我想检查其值存储在数据库中的复选框。下面是示例代码：

<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>

我有一个显示数据库表行的表。该表还在每一行包含一个编辑按钮。单击编辑按钮时，值应自动填充到表单中。其他一切工作正常，但是，我无法将保存在数据库中的复选框设置为已选中。

html 代码：

<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>

我想在编辑模式下显示“domainForm”复选框。请帮忙。

提前致谢。

【问题讨论】：

进行了 ajax 调用-->从 DB 中获取特定值--> 将其分配给任何角度控制器属性--> 在您的 html 视图（复选框）中使用它并自动反映您想要的.

【参考方案1】：

在编辑输入类型复选框时添加一个 ng-checked 条件，如果它存储在数据库中，则必须传递值 true，否则为 false。如果为 true，则选中该复选框。