AngularJs - ng-options object.object答案

【问题标题】：AngularJs - ng-options object.objectAngularJs - ng-options object.object
【发布时间】：2016-12-20 15:11:48
【问题描述】：

我在 angularjs 的选择框中显示国家和城市，它们运行良好。当我调用 {{country}} 时，国家的 ng-model 会显示输出。然而，城市的 ng-model 不能以其模态名称称为 {{city}}。我想将其称为 {{city}} 而不是 {{city.city}}。请注意，两个选择框都可以正常工作，除了无法显示的城市模式 {{city}}

否则，我通过ng-repeat而不是ng-options选择国家时，是否可以得到城市结果

<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>

【问题讨论】：

标签： angularjs drop-down-menu angularjs-scope angularjs-ng-repeat angularjs-ng-options

【解决方案1】：

单击此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="angular.js@1.5.x"></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);
        }
      });
    }
});

【讨论】：

【解决方案2】：

选中此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);
        }
      });
    }
}

【讨论】：

这个代码很好，谢谢，但是你应该调用 {{country.name}} 来显示国家名称。我只想在 ng-modal 中调用 country，然后可以在控制器中使用 $scope.country。该怎么做？