javascript - Angular 看不到 JSON 数组中的所有对象

Question

所以我有这部分代码

$scope.pauseChecked = function(monitorId, groupName) {
  for (var i = 0; i < $scope.monitorResults.length; i++) {
    if (document.getElementById('checkboxId').checked) {
      adminService.pauseMonitor(monitorId, groupName).then(function(response) {
        $scope.getMonitorResultsForSelectedGroups();
        $scope.filterResults();
        var keepGoing = true;
        angular.forEach($scope.monitorResults, function(monitor) {
          if (keepGoing) {
            if (monitor.id == monitorId && groupName == monitor.groupName) {
              monitor.triggerRunning = false;
              keepGoing = false;
            }
          }
        });
      });
    }
  }
};

在这一行内一切正常

<tr ng-repeat="result in monitorResults" ng-click="setSelected(result.id)" ng-class="{highlighted: result.id === selectedRow, selected: checkboxId}">

此行位于 ng-repeat 之外

<td ng-show="monitorResults.triggerRunning"><button class="btn btn-info" style="width: 150px" ng-click="pauseChecked(monitorResults.id, monitorResults.groupName)">Pause Checked </button></td>

这就是它在页面上的样子

<table style="float:left; margin-left: auto; margin-right: auto;">
    <tr >
        <td><button class="btn btn-primary" ng-click="runAllMonitorsNew()" style="width: 150px">Run All Monitors</button></td>
        <td ng-show="!checkedGroup"><button class="btn btn-primary" style="width: 150px" ng-click="pauseGrMonitors(result.groupName)">Pause Monitors</button></td>
        <td ng-show="checkedGroup"><button class="btn btn-primary" style="width: 150px" ng-click="resumeGrMonitors(result.groupName)">Resume Monitors</button></td>
     </tr>
        <tr>
        <td><button ng-click="runChecked(result.id,result.groupName)" class="btn btn-info" style="width: 150px">Run Checked</button></td>
        <td ng-show="monitorResults[0].triggerRunning"><button class="btn btn-info" style="width: 150px" ng-click="pauseChecked(monitorResults.id,monitorResults.groupName)">Pause Checked </button></td>
        <td ng-show="!monitorResults[0].triggerRunning"><button class="btn btn-info" style="width: 150px" ng-click="resumeChecked(monitorResults.id,monitorResults.groupName)">Resume Checked</button></td>
    </tr>
</table>
<table style="float: right; margin-right: 50px">
    <tr>
        <td>
            <json-editor-input model="monitorResults" configuration="configuration" on-error="onError(err)"/>
        </td>
    </tr>
</table>
</div>
<BR>
        <img class="center-block" src="ajax-loader.gif" ng-show="loading"/>
<BR>
<table  class="table table-striped table-bordered">
   <tr>
        <td><B>Monitor Id</B></td>
        <td><B>Monitor Name</B></td>
        <td><B>Monitor Type</B></td>
        <td><B>Group Type</B></td>
        <td><B>Warn Threshold</B></td>
        <td><B>Error Threshold</B></td>
        <td><B>Monitor Result</B></td>
        <td><B>Compare Result</B></td>
        <td><B>Last Run Date</B></td>

    </tr>
       <tr ng-repeat="result in monitorResults" ng-click="setSelected(result.id)" ng-class="{highlighted: result.id === selectedRow, selected: checkboxId}">
        <td><input type="checkbox" ng-model="checkboxId" id="checkboxId" name="checkboxId"></td>
        <td>{{result.id}}</td>
        <td>{{result.name}}</td>
        <td>{{result.type}}</td>
        <td>{{result.groupName}}</td>
        <td>{{result.warnThreshold}}</td>
        <td>{{result.errorThreshold}}</td>
        <td>{{result.monitorResult}}</td>
        <td>  <p ng-style="changeColor(result.compareResult)">{{result.compareResult}}</p> </td>
        <td>{{result.lastRunTime}}</td>
        <td>  <button class="btn btn-primary" ng-click="runMonitorNew(result.id,result.groupName)">Run</button> </td>
        <td ng-show="result.triggerRunning"><button class="btn btn-primary"  ng-click="pause(result.id,result.groupName)">Pause</button> </td>
        <td ng-show="!result.triggerRunning"><button class="btn btn-primary" ng-click="resume(result.id,result.groupName)">Resume</button> </td>
    </tr>

这是我在调试器中看到的

你可以看到，我已经替换了“monitorResults”上的“result”，因为它让我可以访问一个数组，但是当我通过调试器检查代码时，我发现monitorId和groupname是未定义的。那么我使用了monitorResults[0].id和monitorResults[0].groupName，但它只允许我访问数组中的第一个元素，如何访问每个元素？

Answer 1

由于您有两个解耦的表，因此在检查结果时需要在范围内设置一个模型，并且该模型是您应该在暂停按钮中引用的模型。事实上，所有的监视、运行和暂停方法都不需要在方法中传递变量，这些方法应该在内部引用作用域变量 checkboxId。选中该框应将结果设置为 true，以供其他方法使用。

有道理吗？

编辑

我还将 checkboxId 更改为 result.checked 并将其设置为 true 或 false。然后其他操作的 Controller 方法应该循环遍历结果列表并查找已检查的结果并使用它。

模式

用于像这样的两个解耦表的模式是让底部的表 2 在数组中的模型上设置属性，以实现所需的操作，例如“isChecked”、“isPaused”或其他操作。

表 1 包含调用 Controller 方法的按钮。这些方法循环遍历数组并检查切换属性的状态(isChecked、isPaused 或其他)。然后，这些方法通过调用另一个方法并传入他们发现满足条件的模型来执行所需的任何操作。

View 表彼此不可知，识别模型的所有工作都发生在 Controller 中。 View 所做的唯一事情就是更新数组项的属性。