AngularJs - ng-options object.object

我在angularjs中的選擇框中顯示國家和城市，這些工作正常。國家的ng-model在我撥打{{country}}時顯示輸出。但是，城市的ng模型不能稱爲{{city}}的模式名稱。我想將其稱爲{{city}}而不是{{city.city}}。請注意，除了城市的模式外，兩個選擇框都正常工作，無法顯示{{city}}AngularJs - ng-options object.object

否則，我可以在通過ng-repeat選擇國家而不是ng選項時獲得城市結果

<select name="Country" ng-model="country" class="item item-input item-select major" required> 
            <option value=""> Select a Country </option> 
            <option ng-repeat="country in countries" value="{{country.iso_code_3}}">{{country.name}}</option> 
           </select> 


    <select name="City" ng-model="city" data-ng-options="city.name for city in cities| filter:{CountryCode: country}:true" class="item item-input item-select major" required> 
            <option value="">-- Select a City --</option> 
           </select>

來源

2016-12-20 Abel Anojan Sithamparappillai

點擊此Demo示例

HTML代碼供參考：

<html ng-app="myapp"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link href="style.css" rel="stylesheet" /> 
    <script data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js" data-require="[email protected]"></script> 
    <script src="app.js"></script> 
    </head> 
    <body ng-controller="MainCtrl"> 
    <select ng-model="country" data-ng-options="country for country in countries" ng-change="countryChange()"> 
     <option value="">Select country</option> 
    </select> 
    <br> 
    <select ng-model="state" ng-options="state for state in allStates"> 
     <option value="">Select state</option> 
    </select> 
    <br> 
    Country: {{country}} 
    <br> 
    State: {{state}} 
    </body> 
</html>

JS代碼以供參考：

var app = angular.module('myapp', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.countries = ["USA","Canada"]; 
    $scope.states = [{ 
     "name": "Alabama", 
     "countryId": "USA" 
     }, { 
     "name": "Alaska", 
     "countryId": "USA" 
     }, { 
     "name": "Arizona", 
     "countryId": "USA" 
     }, { 
     "name": "Alberta", 
     "countryId": "Canada" 
     }, { 
     "name": "British columbia", 
     "countryId": "Canada" 
    }]; 

    $scope.countryChange = function(){ 
     $scope.allStates = []; 
     angular.forEach($scope.states, function(value){ 
     if($scope.country == value.countryId){ 
      $scope.allStates.push(value.name); 
     } 
     }); 
    } 
});

來源

2016-12-20 07:11:48

謝謝你machan你回答了我問的問題。 –

入住這link來回可靠的國家狀態下拉列表框中

改變下方的HTML代碼

<html ng-app="app"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 
    <body ng-controller="CountriesController"> 
    <select ng-model="country" data-ng-options="country.name for country in countries" ng-change="updateCountry()"> 
     <option value="">Select country</option> 
    </select> 
    <br> 
    <select ng-model="state" ng-options="state.name for state in availableStates"> 
     <option value="">Select state</option> 
    </select> 
    <br> 
    Selected Country: {{country}} 
    <br> 
    Selected State: {{state}} 
    </body> 
</html>

周

的script.js

var app = angular.module("app", []); 

function CountriesController($scope) { 
    $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 
    }]; 

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

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

來源

2016-12-20 05:44:03

此代碼很好，謝謝，但是您應該致電{{country.name}}來顯示國家/地區名稱。我只想在ng-modal中調用country，然後我可以在我的控制器中使用$ scope.country。怎麼做？ –

AngularJs - ng-options object.object

回答

相關問題