2016-10-13 2 views
6

Как проверить, установлен ли флажок в этом примере с угловым углом? Итак, когда пользователь выбирает/проверяет первый флажок, я хочу получить true, а когда снимите/снимите флажок, я хочу false.Проверить, установлен ли флажок в поле Угловое

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 
    $scope.toggleSelection = function toggleSelection() { 
 
     // how to check if checkbox is selected or not 
 

 
    }; 
 
    })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Controller"> 
 
    <h1>Get checkbox selection (true/false)</h1> 
 
    <label> 
 
    <input id="one" type="checkbox" ng-click="toggleSelection()">This 
 
    </label> 
 
    <br> 
 
    <label> 
 
    <input type="checkbox" ng-click="toggleSelection()">That 
 
    </label> 
 
    <br> 
 
    <label> 
 
    <input type="checkbox" ng-click="toggleSelection()">Lorem 
 
    </label> 
 
    <br> 
 
    <label> 
 
    <input type="checkbox" ng-click="toggleSelection()">Ipsum 
 
    </label> 
 
</div>

+1

Хотя этот вопрос отмечен дублирующимся, но выбранный ответ здесь работает лучше. – nik

ответ

8

Он работает:

angular.module('app', []) 
 
     .controller('Controller', function($scope) { 
 
     $scope.toggleSelection = function toggleSelection(event) { 
 
      // how to check if checkbox is selected or not 
 
      alert(event.target.checked); 
 
     }; 
 
     })
<!DOCTYPE html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <h1>Get checkbox selection (true/false)</h1> 
 
    <label> 
 
     <input type="checkbox" ng-click="toggleSelection($event)"> This 
 
    </label> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" ng-click="toggleSelection($event)"> That 
 
    </label> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" ng-click="toggleSelection($event)"> Lorem 
 
    </label> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" ng-click="toggleSelection($event)"> Ipsum 
 
    </label> 
 
    </div> 
 
</body> 
 

 
</html>

+1

Спасибо, это то, что мне нужно! – akuljana

1

Я хотел бы предложить, что вы используете ng-model вместо этого.

<input type="checkbox" ng-model="checkbox1"> 

Затем в контроллере $scope.checkbox1 будет истинным или ложным на основе, если флажок установлен или нет.

if($scope.checkbox1){ 
    //Checkbox is checked 
} else { 
    //Checkbox is not checked 
} 
2

Вы можете использовать нг-модель

angular.module('app', []) 
 
     .controller('Controller', function($scope) { 
 
     
 
     
 
     })
<!DOCTYPE html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <h1>Get checkbox selection (true/false)</h1> 
 
    <label> 
 
     <input type="checkbox" ng-model="m1"> This: {{m1}} 
 
    </label> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" ng-model="m2"> That: {{m2}} 
 
    </label> 
 
    <br> 
 
    
 
    </div> 
 
</body> 
 

 
</html>

0

Используйте ng-model для привязки переменной с помощью флажка, который вы можете получить в своей функции $scope.toggleSelection. Вот реализация

angular.module('app', []) 
    .controller('Controller', function($scope) { 
    $scope.toggleSelection = function toggleSelection() { 
     console.log($scope.firstCheckBox);  
    }; 
    }) 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="app" ng-controller="Controller"> 
    <h1>Get checkbox selection (true/false)</h1> 
    <label> 
    <input id="one" type="checkbox" ng-click="toggleSelection()" ng-model="firstCheckBox">This 
    </label> 
    <br> 
    <label> 
    <input type="checkbox" ng-click="toggleSelection()">That 
    </label> 
    <br> 
    <label> 
    <input type="checkbox" ng-click="toggleSelection()">Lorem 
    </label> 
    <br> 
    <label> 
    <input type="checkbox" ng-click="toggleSelection()">Ipsum 
    </label> 
</div> 
Смежные вопросы