对输入类型复选框使用$scope函数，将 ngClick 或 ngChecked 用于显示结果

Question

我想显示单击复选框项目的结果。 为此，我尝试使用ng-click但它仅在未选中而不是选中后返回结果。

这是我的代码：

.HTML：

<div class="business-type">
<div class="col-sm-12 filter-wrap-inner">
<label for="rad1" ><input type="checkbox" name="reason-closing" value="Transporter" id="ad_Checkbox1" class="ads_Checkbox" ng-model="isTransporterSelected" ng-change="searchUser()"> Transporter</label>
</div>
<div class="col-sm-12 filter-wrap-inner">
<label for="rad1" ><input type="checkbox" name="reason-closing" value="Broker"  id="ad_Checkbox1" class="ads_Checkbox" ng-model="isBrokerSelected" ng-change="searchUser()">Broker</label>
</div>                      
<div class="col-sm-12 filter-wrap-inner">
<label for="rad1" ><input type="checkbox" name="reason-closing" value="Fleet Owner" id="ad_Checkbox1" class="ads_Checkbox" ng-model="isFleetownerSelected" ng-change="searchUser()">Fleet Owner</label>
</div>
</div>
JS:
$scope.isTransporterSelected = false;
$scope.isBrokerSelected = false;
$scope.isFleetownerSelected = false
$scope.searchUser = function(){
$('.load-board-loader').show();
var i;
var containCount= 41;
var vFromStateId = vToStateId = fromStateId = toStateId = '';
var stateId=[];
var $el=$("#usersearch-origin");
$el.find('option:selected').each(function(){
stateId.push({value:$(this).val(),text:$(this).text()});
});
var originId=[];
var $el=$("#usersearch-source");
$el.find('option:selected').each(function(){
originId.push({value:$(this).val(),text:$(this).text()});
});
for(i=0;i<(stateId.length);i++)
{
if(i==0)
{
fromStateId = stateId[i].value;
}
else{
fromStateId = fromStateId+','+stateId[i].value;
}
}
for(i=0;i<(originId.length);i++)
{
if(i==0)
{
toStateId = originId[i].value;
}
else{
toStateId = toStateId+','+originId[i].value;
}
}
vFromStateId = fromStateId ; 
vToStateId = toStateId ;
var data ={
fromStateIds: vFromStateId,
toStateIds: vToStateId,
typeOfBusiness: businessTypeValue,
vehicleClassIds: truckTypeValue,
orgName: '',
}
var url = 'url.com'; 
//if(vFromStateId != '' || vToStateId != ''){
$.ajax({
url: url,
type: "POST", //Use "PUT" for HTTP PUT methods
dataType: 'json',
data: data,
success:function(response){
if ($scope.isTransporterSelected || $scope.isBrokerSelected || $scope.isFleetownerSelected) {
debugger
$scope.users = response.directory;
for(var j= 0; j<response.directory.length; j++){
}
$scope.$apply();
$('.load-board-loader').hide();
} else {
$scope.users = response.directory;
for(var j= 0; j<response.directory.length; j++){
}
$scope.$apply();
$('.load-board-loader').hide();
}
},
error: function(error){
alert("Sorry , No data available"); 
}
});

根据此问题下面的评论，我使用最新代码更新了我的代码。 请让我知道我需要更改哪个部分。 对此的任何帮助都将非常有帮助。

Answer 1

您应该ngModel复选框绑定指令，然后使用ngChange当用户更改输入值而不是ngClick时计算给定的表达式

(function(angular) {
'use strict';
angular.module('myApp', [])
.controller('Controller', ['$scope', function($scope) {
$scope.isTransporterSelected = false;
$scope.searchUser = function() {
//For debugging
console.clear();
if ($scope.isTransporterSelected) {
console.log('Transporter selected search student')
} else {
console.log('Transporter deselected donot search student')
}
}
}]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller as nb">
<label><input type="checkbox" ng-model="isTransporterSelected" value="Transporter" ng-change="searchUser()" > Transporter</label>
</div>