Javascript 当angularjs下拉列表中没有可用选项时，如何提醒用户

在AngularJS中，我正在进行$http调用以填充下拉框。 在某些情况下，下拉框将没有选项可供选择，这相当于下面的代码

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

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [];
});
</script>

---

基本上，如果没有选项，我希望以最干净的方式让用户知道，而无需将警报消息绑定为下拉列表中的选项。

我会选择下拉列表旁边/下面的错误消息

<select ng-model="selectedName" ng-options="x for x in names"></select>
<small ng-show="!names.length">No data to choose from</small>

...

app.controller('myCtrl', function($scope) {
    $scope.names = [];
});

没有可供选择的数据
...
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.names=[]；
});

在选择框内添加一个带有

ng if

条件检查

name.length

的选项标签。我添加了一些按钮来填充/重置用于测试此场景的选择框数据

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.names=[]；
$scope.loadData=函数（）{
$scope.names=['a'，'b'，'c']；
}
});

没有数据可供选择
加载选择框数据
重置
您可能还希望禁用选项上的
属性，因此它不可选择
<select ng-model="selectedName" ng-options="x for x in names"></select>
<small ng-show="!names.length">No data to choose from</small>

...

app.controller('myCtrl', function($scope) {
    $scope.names = [];
});