無法設置在AngualrJs undefined的屬性

Question

我想做一個全選複選框，這將點擊選擇/取消選中頁面上的所有其他複選框。

我的HTML是這樣的：

<table class="table table-striped"> 
    <thead> 
     <tr class="table-header"> 
      <th ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-click="newTestSessionCtrl.selectAllTests()" ng-model=".allSelected" /></th> 
      <th>Test</th> 
      <th>Available Time</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in newTestSessionCtrl.formData.battery.testDefinitions"> 
      <td ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-model="row.selected" ng-change="newTestSessionCtrl.optionToggled(); newTestSessionCtrl.validate()" /></td> 
      <td>{{row.name}}</td> 
      <td>{{(row.duration/60) | number:0}} minutes</td> 
     </tr> 
    </tbody> 
</table> 

這是從我的控制器代碼：

class NewTestSessionController { 
     constructor($scope, $state, resources, NewTestSessionService, formats, AuthenticationService, toastr, momentTimezone, _) { 
      this.allSelected = false; 
     } 

     selectAllTests() { 
      let isSelected = true; 
      if (this.allSelected) { 
       isSelected = false; 
      } 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       v.checked = !isSelected; 
       this.allSelected = !isSelected; 
      }); 
     } 

     optionToggled() { 
      this.allSelected = true; 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       if(!v.checked) { 
       this.allSelected = false; 
      } 
     }); 
     } 
    } 

問題是與allSelected可變的，當我選擇所有複選框，單擊我得到的錯誤有關正在未定義：

我是否試圖以某種錯誤的方式訪問它？當我使用調試器時，這個變量不是不確定的，所以我不確定我是否在正確的位置上看？ 這個問題應該很容易實現，但我仍然不擅長Angular。有人看到這個問題嗎？

Answer 1

這是問題this。

this範圍在回調函數中不可用。

分配this另一個變量，並用它的callbacks

內部與該代碼替換控制器。

class NewTestSessionController { 
     constructor($scope, $state, resources, NewTestSessionService, formats, AuthenticationService, toastr, momentTimezone, _) { 
      this.allSelected = false; 
     } 

     selectAllTests() { 
      let _this = this; 
      let isSelected = true; 
      if (this.allSelected) { 
       isSelected = false; 
      } 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       v.checked = !isSelected; 
       _this.allSelected = !isSelected; 
      }); 
     } 

     optionToggled() { 
      let _this = this; 
      this.allSelected = true; 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       if(!v.checked) { 
       _this.allSelected = false; 
      } 
     }); 
     } 
    } 

Answer 2

使用Arrow Function而不是function()聲明。

代碼

selectAllTests() { 
    let isSelected = true; 
    if (this.allSelected) { 
     isSelected = false; 
    } 
    //arrow function to make current this available inside function 
    angular.forEach(this.formData.battery.testDefinitions, (v) => { 
     v.checked = !isSelected; 
     this.allSelected = !isSelected; 
    }); 
} 

optionToggled() { 
    this.allSelected = true; 
    //arrow function to make current this available inside function 
    angular.forEach(this.formData.battery.testDefinitions, (v) => { 
     if(!v.checked) { 
     this.allSelected = false; 
    } 
});