Question

我正在使用ng-options在我的角度应用中打印表单的所有选项。我直接从我的数据库中获取了值，这给了我一个国家列表：

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">

这里加载页面时，选择不会显示任何内容，即没有占位符，而我想打印一个静态值，如“任何地方”，而不必将其添加到我的“国家/地区”列表中。

我试过这个：

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
<option>Anywhere</option>
</select>

但它不起作用

有没有人知道如何解决这个问题？

由于

Answer 1

这可能是一个迟到的帖子，但你几乎不应该使用ng-repeat，其中ng-options更适合这种情况，因为新的范围是在ng-repeat中创建的，因此你会有更多的开销。

您的问题的解决方案在角文档中写得很好，您需要的内容看起来有点像

<select ng-options="country.country for country in countries"
        ng-model="selectedCountry"
        ng-change="updateSelectedCountry(selectedCountry)"
       class="form-control">
   <option value="" disabled>Anywhere</option>
</select>

使用此角度使用value=""设置空值并从该值开始迭代。

Answer 2

你总是可以这样做：

<select ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
    <option>Anywhere</option>
    <option ng-repeat="country.country for country in countries">{{country.country}}
    </option>
</select>

这是我的fiddle示例

希望这有帮助！

Answer 3

我对hassassin小提琴做了一些调整。这与ng-options的工作方式更为一致。 Example

＆＃13;

var myApp = angular.module('myApp', [])
    .controller('TestController', ['$scope', function ($scope) {
        $scope.data = [1,2,3];
        $scope.sel = '';
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
    {{sel}}
    <select ng-model="sel" ng-options="val for (key , val) in data">
        <option value="">any</option>
    </select>
</div>
  </div>

＆＃13;

Answer 4

您应该在自定义选项标签中设置 value 属性，在您的示例中应为：

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
  <option value='anyValueForThisOption'>Anywhere</option>
</select>

angularJS - 使用ng-options添加静态选项

4 个答案: