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

Parsing JSON result to object by using checkbox

本文关键字：对象 结果 JSON 复选框      更新时间：2023-09-26

我已经将一个JSON列表加载到一个表中，我想将一个或多个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中定义的空值。

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);
}

出于可读性的目的，我在您的示例中做了一些有主见的更改，其他更改是为了使指令按预期启动。以下是对您的片段所做的更改。

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

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

如果是这种情况，那么你在复选框上点击ng的策略是错误的。

您需要的是将您的复选框绑定到您的$scope模型。例如：

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

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

要收集要通过服务器发送的数据，您需要点击提交按钮。在事件处理程序中，只需循环遍历$scope"students"模型中的每个students，只保存那些具有isChecked属性的students以发送到服务器。

希望这能有所帮助！

您可以制作一个函数，将软项推送到对象中，比如…

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

相关文章：