Angularjs kích hoạt phụ thuộc trạng thái quốc gia

Question

Ai đó có thể vui lòng giúp tôi làm ví dụ về tình trạng phụ thuộc của Nhà nước/Tiểu bang không?

Tôi cố ý tạo JSON theo cách này bởi vì tôi muốn phụ thuộc là chung, vì vậy tôi có thể áp dụng nó trên bất kỳ menu thả xuống nào khi chỉ sử dụng Meta Data chứ không phải HTML.

Dưới đây là a link để xem một ví dụ về mã trong JSFidlle

HTML

Country:<select data-ng-model="Countries" data-ng-options="country.id as country.name for country in Countries.items"> 
      <option value="">Please select a country</option> 
     </select> 

State: <select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in currentStates.items"> 
      <option value="">Please select a state</option> 
     </select> 

Mã JavaScript:

function Controller($scope) { 

var Countries = { 
    "id": "field10", 
    "items": [{ 
       "id": "10", 
       "StateGroupID":"0", 
       "name": "United State" 
       }, 
       { 
       "id": "2", 
       "StateGroupID":"1", 
       "name": "Canada" 
       }] 
}; 

var States = 
    { "id": "field20", 
     "StateGroups": [{ 
      "items": [{ "id": "1", 
         "name": "Alabama" 
         }, 
         { 
          "id": "2", 
          "name": "Alaska" 
         }, 
         { "id": "3", 
         "name": "Arizona" 
         }, 
         { "id": "4", 
         "name": "California" 
         }]}, 

       [{ "id": "201", 
        "name": "Alberta" 
        }, 
        { 
         "id": "202", 
         "name": "British Columbia" 
        }, 
        { 
         "id": "303", 
         "name": "Manitoba" 
        }, 
        { 
         "id": "304", 
         "name": "Ontario" 
        }]] 
}; 

$scope.Countries = Countries; 
$scope.currentStates = States.StateGroups[0]; 
$scope.$watch('currentStates', function(value, oldValue){ 
    //alert(value); 
    //alert(JSON.stringify(value)); 
    //$scope.currentStates = (value == "10") ? States.StateGroups[0] : States.StateGroups[1]; 
}); 

}

Answer 1

đầu tiên, tôi nghĩ rằng đó là một chút sai lầm trong JSON của bạn, bạn nên có một "mặt hàng" trước khi các bang Canada

  {"items": [{ "id": "201", 
        "name": "Alberta" 
        }, ..... 

Sau khi thực hiện điều này, tôi sẽ sửa đổi HTML của bạn để có 2 tên mô hình khác nhau (theo cách bạn đã làm, tại lần nhấp đầu tiên bạn ghi đè danh sách các quốc gia). Sau đó, tôi sẽ sử dụng một cú pháp khác nhau cho ng-repeat, để buộc các giá trị cho các StateGroupId

<select data-ng-model="selectedCountry"> 
      <option ng-repeat='country in Countries.items' value='{{country.StateGroupID}}'>{{country.name}}</option>   
     </select> 

Việc làm này cho phép bạn tạo một hàm để có được trạng thái của ID nhóm được lựa chọn:

$scope.getStates=function(){ 
    console.log($scope.selectedCountry) 
    return $scope.backupStates.StateGroups[$scope.selectedCountry].items; 
} 

Sau đó, bạn có thể sử dụng chức năng này để hiển thị chúng bằng cách sử ng-repeat

  <select data-ng-model="selectedState" > 
       <option value="">Please select a state</option> 
       <option ng-repeat='state in getStates()'>{{state.name}}</option> 
      </select> 

tôi sửa đổi fiddle của bạn ở đây: http://jsfiddle.net/DotDotDot/TsxTU/14/, tôi hy vọng đây là loại hành vi bạn wante d :)

Answer 2

Tôi đề nghị bạn một chút về tái cấu trúc cho mô hình dữ liệu của bạn - nó có vẻ rối. Hãy cửa hàng quận và khẳng định trong hai mảng:

$scope.countries = [{ 
    "name": "USA", 
    "id": 1 
    },{ 
    "name": "Canada", 
    "id": 2 
}]; 
$scope.states = [{ 
    "name": "Alabama", 
    "id": 1, 
    "countryId": 1 
    }, { 
    "name": "Alaska", 
    "id": 2, 
    "countryId": 1 
    }, { 
    "name": "Arizona", 
    "id": 3, 
    "countryId": 1 
    }, { 
    "name": "Alberta", 
    "id": 4, 
    "countryId": 2 
    }, { 
    "name": "British columbia", 
    "id": 5, 
    "countryId": 2 
}]; 

Có điều này, chúng ta có thể viết select s cho dữ liệu:

<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()"> 
    <option value="">Select country</option> 
</select> 
<select data-ng-model="state" data-ng-options="state.name for state in availableStates"> 
    <option value="">Select state</option> 
</select> 

Đó là một điều đáng tiếc chúng tôi không thể sử dụng if biểu thức trong selectors - nếu chúng ta có thể, chúng tôi không cần một dòng JS! Nhưng chúng tôi cần:

$scope.updateCountry = function(){ 
    $scope.availableStates = []; 

    angular.forEach($scope.states, function(value){ 
    if(value.countryId == $scope.country.id){ 
     $scope.availableStates.push(value); 
    } 
    }); 
} 

Và đó là tất cả. Here is a working plunk for you.

Answer 3

Cách dễ nhất để khắc phục là giới thiệu currentCountry trong lựa chọn thứ 2 và không cần sử dụng số $watch để đạt được yêu cầu của bạn.

<select data-ng-model="currentCountry" data-ng-options="country.name for country in Countries.items"> 

<select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in States.StateGroups[currentCountry.StateGroupID].items"> 

Demo

Answer 4

góc-nước-picker Chòi chơi cho cài đặt góc-nước-picker (hoặc) NPM cài đặt góc-nước-picker

<script src="bower_components/angular-country-picker/country-picker.js"></script> 
<script src="node_modules/angular-country-picker/country-picker.js"></script> 

     angular.module('webApp', ['puigcerber.countryPicker']); 

     <select ng-model="selectedCountry" pvp-country-picker="name"></select> 

     angular.module('myApp', ['puigcerber.countryPicker']) 
     .config(function(pvpCountriesProvider) { 
     pvpCountriesProvider.setCountries([ 
     { name: 'Abkhazia', alpha2: 'AB'}, 
     { name: 'Kosovo', alpha2: 'XK'}, 
     { name: 'Nagorno-Karabakh', alpha2: 'NK'}, 
     { name: 'Northern Cyprus', alpha2: 'KK'}, 
     { name: 'Somaliland', alpha2: 'JS'}, 
     { name: 'South Ossetia', alpha2: 'XI'}, 
     { name: 'Transnistria', alpha2: 'PF'} 
     ]); 
    });