当从下拉菜单中选择默认值时,隐藏复选框.[Angular js]

Hide the checkboxes on when default value selected from dropdown.[Angular js ]

本文关键字:复选框 隐藏 Angular js 下拉菜单 选择 默认值      更新时间:2023-09-26

一开始效果很好。当我选择国家时,它会过滤国家,但问题是当我选择"—选择国家—"时,它会从列表中显示整个国家。谢谢你的预付。

 <form class="form-horizontal" ng-controller="dropdownCtrl">
 <label for="country" class="col-sm-2 control-label">Country </label>
  <div class="col-sm-7">             
    <select ng-model="customer.Country"                
            ng-options="obj.country as obj.country for obj in countries"
            ng-change="getCountryStates()"
            class="form-control" 
            ng-required="true"
            id="country">
      <option value="">-- Choose Country --</option>
    </select>      
  </div>
<div class="col-sm-7">             
      <div ng-repeat="item in list">
    <input type="checkbox"  ng-model="item.selected" value="{{item.value}}"/>
    <label>{{item.value}}</label>
  </div>

这是我的Controller.js

 var myApp = angular.module('myApp',[]);
myApp.controller('dropdownCtrl', ['$scope','CustomerService',       function($scope, CustomerService) {
  $scope.customer ={
     Country:'', 
     state: '' 
  };
  $scope.countries = CustomerService.getCountry();
  $scope.getCountryStates = function(){
     $scope.list = CustomerService.getCountryState($scope.customer.Country);
  }}]);

这是我的Service.js

myApp.factory("CustomerService", ['$filter', function($filter){
var service = {};
   var countrylist =
   [
         { "id": 1, "country": "USA" },
         { "id": 2, "country": "AUS" },
         { "id": 3, "country": "India" },
  ];

var list = [
        { "id": 1, "value": "New York", "countryId":'USA'},
        { "id": 2, "value": "LA","countryId":'USA' },
        { "id": 4, "value": "Sydny","countryId":'AUS' },
        { "id": 5, "value": "Victoria","countryId":'AUS' },
        { "id": 7, "value": "Delhi","countryId":'India' },
        { "id": 8, "value": "Mumbai","countryId":'India' },
 ];
     service.getCountry = function(){    
         return countrylist;
    };
    service.getCountryState = function(countryId){
    var states = ($filter('filter')(list, {countryId: countryId}));
    return states;
    };

  return service;

}]);

     $scope.getCountryStates = function(){
         $scope.list = CustomerService.getCountryState($scope.customer.Country);
}
 //above function can be changed to
$scope.getCountryStates = function(){
     if($scope.customer.Country)
       $scope.list = CustomerService.getCountryState($scope.customer.Country);
     else $scope.list = []
};