在 AngularJS 中显示嵌套的 JSON 数据

Question

我正在使用Onsen UI，Monaca和AngularJS构建一个跨平台的应用程序。

我有一个屏幕，用户可以在其中使用内置开关的温泉UI（列表项中的开关）从各种开关中进行选择。切换开关意味着需要执行车辆检查，否则假定所有检查都已通过。

我可以按照下面的 JSON 在列表项开关上显示检查说明 （checkitemdesc），但是当我切换任何开关时，我希望能够通过模态显示它们相关的"答案"：[{...}]。

因此，切换"发动机油位

"开关，用户会看到一个模式，其中包含可以在"发动机油位"上执行的相关检查，例如低、加注等。

数据的 JSON 示例

[{
    "fleetcheckitemid": "1",
    "checkitemdesc": "Engine oil level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}, {
    "fleetcheckitemid": "2",
    "checkitemdesc": "Water level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}]

我的 checksController.js用于从返回 JSON 对象的 API 调用$http获取 JSON。

$http.get("http://myfakedomain/api/getfleetchecks.php?fleetid=109").success(function(data) 
{
    $scope.checkItemDescriptions = data;
});

还有我的检查.html用于显示基于 JSON 中"checkitemdesc"的开关。

<ul class="list">
    <li class="list__item" ng-repeat="checkItemDescription in checkItemDescriptions">
        {{checkItemDescription.checkitemdesc}}
        <label class="switch switch--list-item">
            <input type="checkbox" 
                class="switch__input" 
                checked >
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

选择任何开关都应触发模态并填充相关的"答案"：[{...}] 值

模 态

<ons-modal var="modal">
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Further Details</div>
        </div>
        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p>
                    Please give further details for<br>
                    <!-- Display the selected checkitemdesc here - NOT WORKING -->
                    <strong>{{checkItemDescription[i].checkvaluedesc[i]}}</strong>
                </p>
            </div>
            <!-- Display sub-options for main sections - NOT WORKING-->
            <div style="text-align: left; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <!-- Display the selected subitems here - NOT WORKING -->
                <label class="checkbox" ng-repeat="checkItemDescription in checkItemDescriptions[i].answers[i].checkvaluedesc">
                    <input type="checkbox">
                    <div class="checkbox__checkmark"></div>
                        <!-- Display the selected subitems here - NOT WORKING -->
                        {{checkItemDescription[i].answers[i].checkvaluedesc}}
                </label>
            </div>
        </div>
    </div>
</ons-modal>

我可以显示主要检查，但是如何对每个开关进行单独检查，然后根据该开关设置模态值？

Answer 1

请参阅此 plunker：http://plnkr.co/edit/g952bdedUGuBhC5ez5Im?p=preview

你要做的是：

1. 将选定的：true/false 附加到checkitem级别以及answers级别。
2. 将所选行传递给模式控制器。
使用
3. ng-repeat ，使用 $filter 显示项目。

开放模态功能：

$scope.openModal = function(items) {
  var selectedItems = [];
  //get only the selected items
  for(var i = 0; i < items.length; i++) {
    if(items[i].selected === true) selectedItems.push(items[i]);
  }
  var modalInstance = $uibModal.open({
      templateUrl: 'modalTemplate.html',
      controller: MyModalCtrl,
      backdrop: 'static',
      keyboard: false,
      resolve: { //pass selected items to the modal controller
        fleetCheckItems: function() {return selectedItems;}
      }
  });
  modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem; //user clicked okay
  }, function () {
      //user click cancel, figure out something to do with the promise
  });
}