Question

我正在使用Angular Js v1.6.1。我使用以下代码生成选择列表

<select class="form-control" ng-model="selectedLocation">
     <option ng-repeat="item in locations" value="{{item}}">
          {{item}}
     </option>
</select>

在Google Chrome中我得到的结果如下图所示。

但是在Firefox中，我得到了以下结果

在firefox中选择位置后有空白。如何解决这个问题？

位置对象：

Bootstrap版本：3.3.7 FireFox版本：51.0.1（32位）

Answer 1

这里我使用的是同一版本，但我没有任何问题。 plunker此处和image此处

// Code goes here

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
  $scope.locations = ['Farm1', 'Farm2', 'All'];
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body class="container" ng-controller="MainCtrl">
    <div>Select Item</div>
    
    <select class="form-control" ng-model="selectedLocation">
     <option ng-repeat="item in locations" value="{{item}}">
          {{item}}
     </option>
    </select>
    
    <div>Selected item: {{selectedLocation}}</div>

  </body>

</html>

Answer 2

如果要动态生成选项，建议不要在选项中使用ng-repeat。

请尝试ng-options。

您可以查看以下内容并告诉我该问题是否仍然存在？

＆＃13;

(function() {
  'use strict';

  angular.module('myApp', []);
  angular.module('myApp').controller('MainCtrl', ['$scope',
    function($scope) {
      $scope.locations = ['Farm1', 'Farm2', 'All'];
    }
  ]);

}());

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body class="container" ng-controller="MainCtrl">
  <div>Select Item</div>

  <select class="form-control" ng-init="selectedLocation= locations[0]" ng-model="selectedLocation" ng-options="item as item for item in locations" style="width:150px">
  </select>
  <div>Selected item: {{selectedLocation}}</div>
</body>

</html>

＆＃13;

在firefox angular js中选择标记上的ng-model问题

2 个答案: