javascript - 如果选中复选框则执行 if 函数 angular.js

Question

在 Angular JS 中选中复选框时如何执行函数。我已经在堆栈溢出上看到了一些关于此问题的答案，但我似乎无法在我的场景中实现它们

我的代码:

<div ng-controller="MyCtrl">
 <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="thirtyDay" ng-click="changeAxis()">
        Last 30 Days
        </label>
         </div>
         <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="wholeTimeline" ng-click="changeAxis()">
        Whole Timeline
        </label>
         </div>
</div>

js.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
   function changeAxis(){
          if ($scope.thirtyDay) {
                    alert("checked 30");
                }
          else if($scope.wholeTimeline) {
                    alert("checked whole");
                }

        };
}

Answer 1

您需要将该函数放置在 $scope 上，以便 View 能够识别它:

$scope.changeAxis = function() {
      if (!$scope.thirtyDay) {
           alert("checked 30");
      }
      else if(!$scope.wholeTimeline) {
           alert("checked whole");
      }
 };

另一件事需要注意的是，当进入该函数时，您将获得推送之前的模型值。因此，如果您单击并选中它，该值仍将为 false(尚未更新)。因此，要么使用 !$scope.thirtyDay 要么放入 $timeout。

编辑:正如迈克在评论中正确提到的那样，您可能最好使用 ng-change 而不是 ng-click (这样，在与另一个属性交互时，另一个属性也不会触发)。我也会加入该建议，并建议考虑为不同的属性使用不同的函数，但我不确定您这样做的具体用途。