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;
            }
          }
        });
      });
    }
  }
};