如何在沒有可用選項時提醒用戶angularjs dropdown

在AngularJS中，我正在進行$ http調用以填充下拉框。在某些情況下，下拉框將沒有可供選擇的方案，當我運行該代碼的用戶只是看到什麼這將等同於下面的代碼如何在沒有可用選項時提醒用戶angularjs dropdown

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

基本上如果沒有選擇我想要讓用戶知道在乾淨的方式可能沒有約束力的警告消息在下拉列表中選擇一個選項。

來源

2017-03-15 user2719805

添加一個選項標籤與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>

來源

2017-03-15 13:57:04

您可能還需要有'的選項disabled'屬性，所以它不是可選 – Fissio

我會去看下面/下面的下拉菜單中的錯誤消息。如果

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

來源

2017-03-15 13:53:28 Fissio

使用1ng至檢查數組長度是高於0，然後顯示消息

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

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

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
    $scope.names = []; 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <select ng-model="selectedName" ng-options="x for x in names"></select> 
 
    <small ng-if="!names.length">No data to choose from</small> 
 
</div>

來源

2017-03-15 13:55:55

如何在沒有可用選項時提醒用戶angularjs dropdown

回答

相關問題