Question

如果在角度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上，以便视图识别它：

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

另一件需要注意的事情是，在输入函数时，您将在推送之前获得模型的值。因此，如果您单击并选中它，则该值仍为false（尚未更新）。因此，请使用!$scope.thirtyDay或将其放在$timeout。

中

编辑：正如迈克在评论中正确提到的那样，你可能更善于使用ng-change代替ng-click（这样其他属性就不会触发当与另一个互动时很好）。我也会加入这个建议并建议考虑不同属性的不同功能，但我不确定你正在做什么用途。

Answer 2

您需要使用此行将控制器添加到myApp。

myApp.controller('MyCtrl', MyCtrl);

您需要将changeAxis函数链接到范围

$scope.changeAxis = changeAxis;

所以你的app.js就像是

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

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

        };
        $scope.changeAxis = changeAxis;
}

我希望你在你的HTML中添加了ng-app。另请考虑另一个答案中提到的ngChange建议。

Answer 3

这是有效的demo

<强> HTML

<body>
  <a href="#" id="csvDownload" download></a>
</body>
<script>
if( data.length == 10){
        var lnk = document.getElementById("csvDownload");
        var stored_data = data;
        data = [];

        console.log(stored_data);
        var csv_file = ConvertToCSV(stored_data);   //ConvertTOCSV is a function
        lnk.href = csv_file;
        lnk.click();
 }
</script>

JS

<div ng-app="myApp">
<div ng-controller="myCtrl" >
 <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="thirtyDay" ng-change="changeAxis1()">
        Last 30 Days
        </label>
         </div>
         <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="wholeTimeline" ng-change="changeAxis2()">
        Whole Timeline
        </label>
         </div>
</div>
</div>

if if function if if复选框被选中angular.js

3 个答案: