如何在 ng-repeat 下拉输入框中添加占位符？

Question

我正在使用 ng-repeat 实现一个下拉菜单。我想在输入框中添加占位符，因为第一次它是空白的（没有选择下拉选项）。所以我想设置默认占位符。我不想让下拉输入框留空

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

Answer 1

您可以添加一个选项

<option value="" disabled selected>Please Select</option>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["","Emil", "Tobias", "Linus"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
<option value="" disabled selected>Please Select</option>
</select>

</div>

Answer 2

您可以在 select 中使用 ng-init 设置默认值。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-init="selectedName = names[0]" 
    ng-model="selectedName" 
    ng-options="x for x in names">
</select>

</div>

Answer 3

你可以这样试试。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
<option value="" selected>Please select</option>
</select>

</div>

Answer 4

在此处禁用添加选项：

<option disabled selected value>Select here</option>

代码： https://codepen.io/anon/pen/YYxzxj

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
  <option disabled selected value>Select here</option>
</select>

</div>

Answer 5

添加一个选项

 <select ng-model="selectedName" ng-options="x for x in names">
      <option disabled selected value>Please Select</option>
    </select>

如何在 ng-repeat 下拉输入框中添加占位符？

How to add placeholder in ng-repeat dropdown input box?

html

javascript

angularjs

angularjs-ng-repeat