Question

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

我有一个屏幕，用户可以使用内置交换机（Switch in List Item）内置的Onsen 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 用于从$ http API调用中获取JSON，该调用返回一个JSON对象。

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

我的 checks.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

你做的是：

将选中的：true / false附加到checkitem级别以及answers级别。
将选定的行传递给模态控制器。
使用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
  });
}

在AngularJS中显示嵌套的JSON数据

1 个答案: