当没有选项可用时如何提醒用户答案

【问题标题】：How to alert users when no option is available angularjs dropdown当没有选项可用时如何提醒用户
【发布时间】：2017-03-15 13:49:20
【问题描述】：

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

现在，当我运行此代码时，用户什么也看不到。我想在下拉框中放置一条消息，说“没有可供选择的数据”。为了做到这一点，我是否必须将消息绑定为ng-option，或者是否有更简洁的方法，所以看起来“没有可供选择的数据”是一个合法的选择，例如下面的代码好像。

<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 = ["no data to choose from"];
});
</script>

基本上，如果没有选项，我想以最简洁的方式让用户知道，而不将警报消息绑定为下拉列表中的选项。

【问题讨论】：

标签： javascript angularjs drop-down-menu error-handling

【解决方案1】：

在选择框内添加带有ng-if 条件检查names.length 的选项标签。我添加了一些按钮来填充/重置选择框数据以测试此场景。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [];
    
    $scope.loadData = function(){
      $scope.names = ['a', 'b', 'c'];
    }
});

<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="" ng-if="!names.length">No data to choose</option>
</select>
<button ng-click="loadData()">load selectbox data</button>
<button ng-click="names=[]">Reset</button>
</div>

【讨论】：

您可能还希望在选项上具有disabled 属性，因此它不可选

【解决方案2】：

我会在下拉列表旁边/下方查看错误消息。

<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 = [];
});

【讨论】：