在 AngularJS 中使用选项设置选择答案

【问题标题】：Setting a select with options in AngularJS在 AngularJS 中使用选项设置选择
【发布时间】：2017-11-19 09:03:25
【问题描述】：

很抱歉打扰，我遇到了 Angular 问题。

对框架来说很新，我正在尝试使用具有选项的选择来设置一个公式。但是由于某种原因，在 html 页面中，我有一个国家列表，但它是空的。

谁能给个提示如何通过它吗？

提前致谢

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/style.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Latest Angular -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body>

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>NIF</legend>

<!-- Text input-->
<div class="form-group">
  <md-input-container>
    <label class="col-md-4 control-label" for="textinput">NIF</label>
    <div class="col-md-4">
      <input id="textinput" name="textinput" type="text"
             placeholder="Entrer le NIF" class="form-control input-md"
             required="" ng-model="data.nif">
    </div>
  </md-input-container>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label">Pays</label>
  <div class="col-md-4" ng-controller="countryController">
    <select ng-model="selectedCountry" class="form-control"
            ng-options="location as location.name for location in locations">
      <!--<option ng-value="country" ng-repeat="country in countries"></option>-->
    </select>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="Entité">Entité</label>
  <div class="col-md-4">
    <select id="Entité" name="Entité" class="form-control"
            ng-model="data.entity">
      <option value="Personne physique">Personne physique</option>
      <option value="Personne morale">Personne morale</option>
    </select>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
    <button id="" name="" class="btn btn-primary center-btn">Lancer la recherche</button>
  </div>
</div>


</fieldset>
</form>

</body>


</html>

angular.controller('countryController', function($scope) {
  $scope.locations = [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' }
  ];
  $scope.selectedCountry = { name: 'A' };
});

【问题讨论】：

标签： angularjs forms select

【解决方案1】：

更正默认选择的参考。

所以把$scope.selectedCountry = { name: 'A' };改成$scope.selectedCountry = $scope.locations[0];

工作演示：

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
  $scope.locations = [{
      name: 'A'
    },
    {
      name: 'B'
    },
    {
      name: 'C'
    }
  ];
  $scope.selectedCountry = $scope.locations[0];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <fieldset ng-controller="FirstCtrl">
    <select ng-options="location as location.name for location in locations" ng-model="selectedCountry"></select> {{ selectedCountry }}
  </fieldset>
</div>

【讨论】：

【解决方案2】：

我刚刚发现我可以创建多个模块，但不能在同一页面中放置多个 ng-app。它现在运行良好。

【讨论】：