AngualrJsで未定義のプロパティを設定できません

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

scope号は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; 
    } 
});