javascript - AngularJS ng-repeat 中复选框的奇怪行为

Question

我有一个包含输入字段和复选框的表单(动态生成表增删改查)。见下图:

在这里，在我的客户端模式对话框中，我实现了一些小的 CRUD，用于添加/更新/删除 Providers 数据并动态显示下面的表格。

以下是我的代码:

查看:

<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">

    <div class="form-group">
        <label for="name">Name</label>            
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
        </div>
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
        </div>
    </div>

    <div class="form-group">
        <label for="phone">Phone</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
        </div>
    </div>

    <div class="form-group">
        <label for="phone">Providers</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
            <input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
        </div>
        <br>
        <button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
        <button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
        <button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
        <br>            
        <table style="width: 50%; margin-top: 10px;" class=""> 
            <tbody>
                <tr ng-repeat="val in providersData">
                    <td>
                        <input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
                    </td>
                    <td>{{val.provider_name}}</td>
                    <td>
                        <a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
                        &nbsp;&nbsp;&nbsp;                            
                        <a  style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>                        
                    </td>
                </tr>
            </tbody>
        </table>            
    </div>        

    <div class="well well-lg text-center bg-gray">          
        <button class="btn btn-success" ng-if="id">Save Client</button>                        
        <button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>                        
        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>            
        <button class="btn btn-success" ng-if="!id">Add Client</button>            
    </div>
</form>

Controller :

        $scope.showModal = false;
        $scope.client = {};
        $scope.provider = null;            

        $scope.addClient = function () {
            alert(JSON.stringify($scope.client));
            $http.post('/clients', {param: $scope.client}).success(function (response) {
                if (response) {
                    alert("Client added successfully");
                    $scope.client = "";
                    refresh();
                    $scope.closemodal();
                }
            });
        };

现在我想将选定的 checkboxes 值以及 Name、Email 和 Phone 插入/更新到数据库> 字段。

这里我面临以下问题:

1. 每当我点击任何复选框时，它都会选中所有复选框。
2. 点击“添加客户端”按钮后，它会显示 alert(JSON.stringify($scope.client)) 的结果，如下所示 {"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
3. 在 mongodb 中它的显示如下:

我已经尝试了很多搜索this和 ng-model="$parent.client.providersList.id" 但仍然不起作用。

我是 AngularJS 的初学者，刚刚开始研究它。

如有任何帮助，我们将不胜感激。

Answer 1

您应该在复选框上使用ng-true-value和ng-false-value(我认为默认值为0)。然后使用 providersData ng-repeat 的 $index 创建 client.providersList 数组。

标记

<input type="checkbox" name="{{'providersData'+$index}}" 
  ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />