使用复选框将 JSON 结果解析为对象答案

【问题标题】：Parsing JSON result to object by using checkbox使用复选框将 JSON 结果解析为对象
【发布时间】：2015-11-23 16:20:47
【问题描述】：

我已将 JSON 列表加载到表中，我想将 1 个 JSON 结果或多个结果解析为一个对象，以便将其发送到服务器。

到目前为止，我的桌子是这样的：

HTML

<tr ng-repeat="t in student">
    <td ng-model="herkanserNaam">{{ t.Name }}</td>
    <td>{{ t.City }}</td>
    <td>
        <div class="checkbox" ng-click="laatzien(herkanserNaam, herkanserCheck)" ng-model="herkanserCheck">
            <label>
                <input type="checkbox">
            </label>
        </div>
    </td>
</tr>

控制器

$scope.laatzien = function(name, active) {  

    var herkanser = [{
    "name" :  name,
    "active" : false
    }];
    console.log(herkanser);

}

我如何能够检查一个或多个结果并使用复选框将数据（t.Name）保存到对象中？到目前为止，函数 laatzien() 正在返回在 herkanser 中定义的空值。

【问题讨论】：

我不认为 td 可以有 ngModel.... 将 t.name 传递给您的函数并删除 ngModel

标签： javascript jquery json angularjs checkbox

【解决方案1】：

laatzien 方法失败的原因是您使用指令的方式。让我们使用您提供的示例来触发您的 laatzien 方法。

HTML

<tr ng-repeat="student in students">
    <td>{{ student.Name }}</td>
    <td>{{ student.City }}</td>
    <td>van</td>
    <td>Huis</td>
    <td>j.huis@student.han.nl</td>
    <td>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="student.isActive" ng-change="laatzien(student)">
            </label>
        </div>
    </td>
</tr>

Javascript

$scope.laatzien = function (student) {
    var herkanser = [{
        "name": student.name,
        "active": student.isActive
    }];
    console.log(herkanser);
}

出于可读性目的，我在您的示例中进行了一些自以为是的更改，还需要其他更改才能使指令按预期触发。以下是对您的 sn-ps 的更改。

将student 数组重命名为students。这需要将您的控制器从 $scope.student 更改为 $scope.students。
将t 对象重命名为student。
从您的 div 中删除了 ng-click 指令。
在您的复选框上添加了ng-change 指令。现在，当您单击复选框时，您的 laatzien 方法应该会触发。
将isActive 属性添加到您的student。在您的 laatzien 方法中，您现在可以检查复选框的状态。如果复选框被选中，student.isActive = true。如果复选框未选中，student.isActive = false。

【讨论】：

【解决方案2】：

从您的代码中，您似乎想要构建“已检查学生列表”并将其发送到服务器。换句话说，您想要的是允许用户检查多个学生，最后收集检查的所有内容并将其发送到服务器。

如果是这种情况，那么您在复选框上单击 ng-click 的策略是错误的。

您需要将您的复选框绑定到您的 $scope 模型。比如这样：

<input type="checkbox" ng-model="t.isChecked" ng-true-value="true" ng-false-value="false'">

当用户选中学生的复选框时。您的模型将自动更新。

要收集数据以通过服务器发送，您需要单击提交按钮。在事件处理程序中，只需遍历 $scope "students" 模型中的每个学生，并仅将具有 isChecked 属性的学生保存为 true 以发送到服务器。

希望这会有所帮助！

【讨论】：

【解决方案3】：

你可以创建一个函数来将项目推送到一个 obj 中......

$scope.students = [
    {
        "name":"John",
        "city":"Boston"
    },
    {
        "name":"Amy",
        "city":"Dallas"
    }
    ]

$scope.activeObj = [];

$scope.laatzien = function(obj) {  
    if($.inArray(obj, $scope.activeObj) == -1) {
        $scope.activeObj.push(obj); 
    } else {
        var index = $scope.activeObj.indexOf(obj);
        $scope.activeObj.splice(index, 1);
    }
}

http://jsfiddle.net/5fcnazb2/

【讨论】：