Question

我有一个包含输入字段和复选框的表单（动态生成表格crud）。见下图：

在这里，在我的客户模式对话框中，我实现了一些小问题，用于添加/更新/删除for remaining in range(60 * 60, 0, -1): mins, secs = divmod(remaining, 60) # Probably do something other than print that should take a # trivial amount of time... if it takes 10 seconds then things # will start to look weird print('{}mins and {}secs remaining'.format(mins, secs)) time.sleep(1)数据，并在运行时显示下面的表格。

以下是我的代码：

查看：

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>

现在，我想将选定的$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的结果如下 alert(JSON.stringify($scope.client))
在mongodb中它的表现如下：

我经常搜索this和{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}，但仍无效。

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

任何帮助都将不胜感激。

Answer 1

你应该使用ng-true-value＆amp; ng-false-value上checkbox {我认为默认值为0）。然后使用$index ng-repeat的providersData创建一个client.providersList数组。

<强>标记

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

Answer 2

由于 ng-model 属性的价值，您正面临此问题。每个复选框的ng-model属性值必须不同。在这里，试试这个：

<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />

尝试这样的事情：

$scope.client = {}; 
$scope.client.providersList = [];

// Now watch the model for changes
$scope.$watch('client', function(){
    // When the checkbox is selected it returns true
    if($scope.client.providersList1 == true){
        $scope.client.providersList.push({"id": value})
    }
    // Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

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

2 个答案: