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”上替换了“结果”，因为它使我可以访问数组，但是事情是当我通过调试器检查代码时，我发现MonitorId和groupname是未定义的。 因此，我使用了monitorResults [0] .id和monitorResults [0] .groupName，但是它只允许我访问数组中的第一个元素，如何获得对每个元素的访问权限？

Answer 1

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

说得通？

编辑

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

图案

用于两个这样的分离表的模式是在表中模型的底部设置表2，以执行所需的操作，例如“ isChecked”，“ isPaused”或其他。

然后，表1具有调用控制器方法的按钮。 这些方法在数组中循环并检查切换属性的状态（isChecked，isPaused或其他）。 然后，这些方法通过调用另一个方法并传入他们发现符合条件的模型来执行所需的操作。

视图表彼此不可知，并且识别模型的所有工作都在控制器中进行。 该视图唯一要做的就是更新数组项的属性。

Answer 2

解释您的功能：

$scope.pauseChecked = function(monitorId, groupName) { //you might be getting monitorId and group name properly
  for (var i = 0; i < $scope.monitorResults.length; i++) { //maybe you are looping to get all selected elements
    if (document.getElementById('checkboxId').checked) { //this will never work properly, because it will only find the first element(due to id which may/maynot be checked), plus why are you trying to do this?
      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;
            }
          }
        });
      });
    }
  }
};