Question

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

现在，当我运行此代码时，用户什么也看不见。我想在下拉框中添加一条消息，说明＆＃34;没有数据可供选择＆＃34;。为了做到这一点，我是否必须将消息绑定为ng-option，或者是否有更简洁的方式来执行此操作，因此它看起来不像＆＃34;没有数据可供选择＆＃34;是一个合法的选择，如下面的代码使它看起来。

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

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

Answer 1

我会在下拉列表的下方/下方找到错误消息。

Service

Answer 2

在选择框中添加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>

如何在没有选项可用时提醒用户angularjs下拉列表

2 个答案: