javascript - 在输入类型复选框上使用 $scope 函数，并使用 ng Click 或 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 指令与复选框绑定(bind)，然后使用 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>