AngularJS - 如何使級聯選擇並保存到API

我有以下的JSON文件，其中列出的國家和他們的狀態：AngularJS - 如何使級聯選擇並保存到API

[ 
    { 
     "value": "Australia", 
     "text": "Australia", 
     "states": [ 
      { 
       "value": "Australian Capital Territory", 
       "text": "Australian Capital Territory" 
      }, 
      { 
       "value": "New South Wales", 
       "text": "New South Wales" 
      } 
     ] 
    } 

]

我在一個變量稱爲countriesAndStates加載數據和然後我在前端顯示此：

  <div class="form-group"> 
       <label for="country" class="col-sm-2 control-label">Country</label> 
       <div class="col-sm-3"> 
        <select class="form-control" id="country" data-ng-model="project.country" data-ng-options="country.value as country.text for country in countriesAndStates"> 
         <option disabled value="">Select</option> 
        </select> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="country" class="col-sm-2 control-label">State</label> 
       <div class="col-sm-3"> 
        <select class="form-control" id="state" data-ng-model="project.state" data-ng-options="state.value as state.text for state in countriesAndStates.states" data-ng-disabled="!countriesAndStates.states"> 
         <option disabled value="">Select</option> 
        </select> 
       </div> 
      </div>

我也從一個REST API加載數據並將其顯示在前端：

var detailProject = Restangular.one('projects', $routeParams.projectId); 
    detailProject.get().then(function (project) { 
     $scope.project = project; 

     $scope.saveProject = function() { 
      project.put().then(processSuccess, processError); 
     }; 

    });

當我點擊保存，一saveProject函數的數據提出回API。

現在......我如何將國家與國家聯繫起來？

從我的文檔中理解的，我需要改變NG-模特屬性，以反映國家和國家......像這樣：

<select id="country" ng-model="states" ng-options=""></select> 
<select id="state" ng-disabled="!states" ng-options=""></select>

但是我有點糊塗了，怎麼能當我想要將API數據加載到選擇框中時，我這樣做了嗎？

來源

2014-11-21 eHx

人有什麼想法？ – eHx 2014-11-24 19:37:30

找了幾個小時......我終於明白了。發佈此信息給所有可能遇到相同問題的人。

我修改了數據，分裂國家，並指出到2個不同的文件

國家：

[ 
    { "name": "United States" }, 
    { "name": "Canada" } 
    etc... 
]

國：

[ 
    { "name": "Alabama", "country": "United States" }, 
    { "name": "Alberta", "country": "Canada" } 
    etc... 
]

修改HTML

<select data-ng-model="project.country" data-ng-options="country.name as country.name for country in countries" data-ng-change="updateCountry()" class="form-control"> 
    <option disabled value="">Select country</option> 
</select> 


<select data-ng-disabled="!project.country" data-ng-model="project.province" data-ng-options="state.name as state.name for state in states | filter:{country: availableStates}" class="form-control"> 
    <option disabled value="">Select state</option> 
</select>

控制器

$scope.updateCountry = function() { 
    $scope.availableStates = $scope.project.country; // filter by country 
    $scope.project.province = ''; // reset the province field to empty 
};

來源

2014-11-26 18:03:50 eHx

這與** prawn **告訴你的一樣（使用'filter'） – 2014-12-02 06:19:35

我覺得像這樣的工作....

您可以通過project.country過濾掉的選項。我還放置了禁用ng指令，以防止他們在此下拉列表中選擇一個選項，前提是他們沒有先選擇國家/地區。

<select ng-disabled="!project.country" ng-model="selectedState" 
ng-options="state.value as state.text for state in countriesAndStates.states | filter:{text: project.country}"></select>

來源

2014-11-21 21:39:45 prawn

這不起作用在FE上呈現:( – eHx 2014-11-24 13:25:39

AngularJS - 如何使級聯選擇並保存到API

回答

相關問題