Выполнять, если функция, если флажок установлен, angular.js

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

Здесь работает demo

HTML

<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> 

JS

var app = angular.module('myApp', []); 
app.controller('myCtrl',['$scope', function($scope) {   
    $scope.changeAxis1 = function() {     
      if ($scope.thirtyDay) { 
        alert("checked 30"); 
        $scope.wholeTimeline = false; 
       }     
    }; 
    $scope.changeAxis2 = function() {     
      if($scope.wholeTimeline) { 
        alert("checked whole"); 
        $scope.thirtyDay = false; 
       }   
    }; 
}]); 

Answer 2

Вы должны поместить функцию на $scope, таким образом, представление распознает его:

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

Другое дело, нужно заметить, что при входе в функцию, вы получите значение модели от до толчка. Поэтому, если вы нажмете и он будет установлен, значение будет по-прежнему ложным (еще не обновлено). Поэтому либо используйте !$scope.thirtyDay, либо разместите его в $timeout.

EDIT: Как Майк правильно упомянул в своем комментарии, вы, вероятно, будет лучше использовать ng-change вместо ng-click (таким образом другое имущество не будет вызывать, а также при взаимодействии с другой). Я также присоединился бы к рекомендации и предлагаю рассмотреть другую функцию для разных свойств, но я не уверен точно, к какому использованию вы это делаете.

Answer 3

Вам необходимо добавить контроллер в 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. Также, пожалуйста, рассмотрите предложение ngChange, упомянутое в другом ответе.