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

Posted 2021-04-09

我正在使用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>

答案

您可以添加选项

<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>

另一答案

添加选项

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

另一答案

您可以在选择中使用qazxsw poi设置默认值。

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>

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>

代码：<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"];
});

以上是关于如何在ng-repeat下拉输入框中添加占位符？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Django Admin 的搜索框中添加占位符文本？

Woocommerce Checkout：在国家下拉列表中添加占位符[重复]

占位符 z-index Firefox 问题

缩小占位符文本后如何使占位符和文本框光标居中？

Zend 文本元素中的占位符文本

如何在输入标签的占位符中添加材质图标