以下是场景

Json回应如下：

{ “MVXR”：[{ “levelId”：1， “levelName”： “L2”}，{ “levelId”：2 “levelName”： “L3”}，{ “levelId”：3“，levelName “：” L4 “}]，” CVI “：[{” levelId “：3”，levelName “：” L4 “}]，” BPI “：[{” levelId “：2”，levelName “：” L3" } ]}

有时可能会出现空响应，然后我需要将所有复选框显示为false

杰森回应 {}

我需要一些指导如何在angularjs中完成所有逻辑？

我需要使用指令吗？。我需要创建标题以及动态。

Answer 1

首先应该使用DOM上的ng-repeat将JSON对象转换为易于遍历的对象，以完成输出。

(function initController(){
    // calling the service and getting the JSON object
    var machines = {
        "MVXR": [  {  "levelId": 1, "levelName": "L2"}, 
                   { "levelId": 2, "levelName": "L3" },
                   { "levelId": 3, "levelName": "L4" }  ],
        "CVI":  [  { "levelId": 3, "levelName": "L4" }  ],
        "BPI":  [  { "levelId": 2, "levelName": "L3" }  ]
    };
    transfromReponse(machines);
})();

function transfromReponse(machines){ // pass your JSON object
    $scope.machineAndLevels = [];
    angular.forEach(machines, function(levelArray, key){
        var machine = {
            name: key,
            L2: false,
            L3: false,
            L4: false
        };
        angular.forEach(levelArray, function(level){
            machine[level.levelName] = true;
        });
        $scope.machineAndLevels.push(machine);
    });
}

然后非常容易地使用ng-repeat遍历这个变形对象。

<div class="row" ng-show="machineAndLevels.length > 0">
    <table class="table table-bordered">
        <thead>
            <td> Machines </td>
            <td> Level 2</td>
            <td> Level 3 </td>
            <td> Level 4 </td>        
        </thead>
        <tr ng-repeat="machine in machineAndLevels">
            <td> {{machine.name}} </td>
            <td> <input type="checkbox" ng-model="machine.L2"> </td>
            <td> <input type="checkbox" ng-model="machine.L3"> </td>
            <td> <input type="checkbox" ng-model="machine.L4"> </td>
        </tr>
    </table>
</div>

如何使用标题创建动态表格以及角度js

以下是场景

1 个答案: