选择项目时选择选项消失（Angular）

Question

我有一个奇怪的案例。当我选择项目作为选择选项时，选择消失。两个选择器都会发生这种情况。 这是我的控制器

[{"id_country":"1","country":"Austria"},
{"id_country":"2","country":"Belgium"},{"id_country":"3","country":"Bulgaria"},{"id_country":"4","country":"Croatia"},{"id_country":"5","country":"Cyprus"},{"id_country":"6","country":"Czech Republic"},
{"id_country":"7","country":"Denmark"},{"id_country":"8","country":"Estonia"},{"id_country":"9","country":"Finland"},{"id_country":"10","country":"France"},{"id_country":"11","country":"Germany"},{"id_country":"12","country":"Greece"}]

这是国家的对象

<div class="form-group">
    <label>Country</label>
    <select class="form-control" data-ng-model="countries"
            data-ng-options="c.id_country as c.country for c in countries"></select>
</div>
<div class="form-group">
    <label>Province</label>
    <select class="form-control" data-ng-model="provinces"
            data-ng-options="p.id_province as p.province for p in provinces">
    </select>
</div>

这是我的HTML

<div class="form-group">
    <label>Country</label>
    <select class="form-control ng-valid ng-empty ng-dirty ng-valid-parse ng-touched" 
     data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"><option selected="selected"></option></select>
</div>

当我在选择中选择一个项目时，会发生这种情况

try
{
    Ping myPing = new Ping();
    String host = "www.google.com";
    byte[] buffer = new byte[32];
    int timeout = 4000;
    PingOptions pingOptions = new PingOptions();
    PingReply reply = myPing.Send(host, timeout, buffer, pingOptions);
}
catch (Exception)
{
    MessageBox.Show("You aren't connected a internet or connection is to slow. Please check your connection.", "Error", MessageBoxButtons.OK, MessageBoxIcon.Warning);
    MainMenu.timer1.Enabled = false;
}

控制台日志完全没有显示任何错误。我使用数据-ng-model错误的方式？可能是这个问题的原因。如果您需要任何其他信息，请告诉我。谢谢

Answer 1

当您选择一个项目时，AngularJS会将countries的内容替换为您选择的id_country。因此，没有国家/地区显示select标记。

在此演示中查看您的问题：

(function() {
  var app = angular.module("app", []);
  app.controller("addLocationCtrl", ["$scope",
    function($scope) {
      $scope.countries = [{
        "id_country": "1",
        "country": "Austria"
      }, {
        "id_country": "2",
        "country": "Belgium"
      }, {
        "id_country": "3",
        "country": "Bulgaria"
      }, {
        "id_country": "4",
        "country": "Croatia"
      }, {
        "id_country": "5",
        "country": "Cyprus"
      }, {
        "id_country": "6",
        "country": "Czech Republic"
      }, {
        "id_country": "7",
        "country": "Denmark"
      }, {
        "id_country": "8",
        "country": "Estonia"
      }, {
        "id_country": "9",
        "country": "Finland"
      }, {
        "id_country": "10",
        "country": "France"
      }, {
        "id_country": "11",
        "country": "Germany"
      }, {
        "id_country": "12",
        "country": "Greece"
      }];
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="addLocationCtrl">
    <div class="form-group">
      <label>Country</label>
      <select class="form-control" data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}}
    </div>
    <div class="form-group">
      <label>Province</label>
      <select class="form-control" data-ng-model="provinces" data-ng-options="p.id_province as p.province for p in provinces">
      </select>
    </div>
  </div>
</div>

解决方案：用其他名称替换data-ng-model =“国家/地区”。

data-ng-model="currentCountryId"和data-ng-model="currentProvinceId"。

(function() {
  var app = angular.module("app", []);
  app.controller("addLocationCtrl", ["$scope",
    function($scope) {
      $scope.countries = [{
        "id_country": "1",
        "country": "Austria"
      }, {
        "id_country": "2",
        "country": "Belgium"
      }, {
        "id_country": "3",
        "country": "Bulgaria"
      }, {
        "id_country": "4",
        "country": "Croatia"
      }, {
        "id_country": "5",
        "country": "Cyprus"
      }, {
        "id_country": "6",
        "country": "Czech Republic"
      }, {
        "id_country": "7",
        "country": "Denmark"
      }, {
        "id_country": "8",
        "country": "Estonia"
      }, {
        "id_country": "9",
        "country": "Finland"
      }, {
        "id_country": "10",
        "country": "France"
      }, {
        "id_country": "11",
        "country": "Germany"
      }, {
        "id_country": "12",
        "country": "Greece"
      }];
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="addLocationCtrl">
    <div class="form-group">
      <label>Country</label>
      <select class="form-control" data-ng-model="currentCountryId" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}}
    </div>
    <div class="form-group">
      <label>Province</label>
      <select class="form-control" data-ng-model="currentProvinceId" data-ng-options="p.id_province as p.province for p in provinces">
      </select>
    </div>
  </div>
</div>