Question

我有一组复选框，使用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”的复选框。请帮助。

提前致谢。

Answer 1

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

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

1 个答案: