当选项中ng-options为空时,显示没有数据可用消息?

时间:2017-07-18 14:04:47

标签: angularjs

我创建了一个选择元素

<label class="item item-select no-border-bottom padding full-width custom-back">
  <div class="input-label">Select Time Slot</div>
   <select ng-model="addAppointment.timeSlot" name="timeSlot" class="custom-back" ng-disabled="!addAppointment.date" ng-options="timeSlot as timeSlot for timeSlot in availableTimeSlots" required>
    </select>
</label>

当ng-options数组为空时,我想在select中选择消息No Data

1 个答案:

答案 0 :(得分:1)

您可以在选择中添加<option> ng-if angular.module('app', []) .controller('ctrl', function($scope) { $scope.options = []; $scope.selectedOption = undefined; $scope.addOptions = function() { var start = $scope.options.length; for(var i = 1; i <= 5; i++) { $scope.options.push('Option #' + (start + i)); } } });。这是一个如何工作的人为例子。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="selectedOption" ng-options="opt as opt for opt in options">
    <option value="" ng-if="options.length === 0">No Data</option>
  </select>
  <button type="button" ng-click="addOptions()">Add Options</button> 
</div>
# in the tests
console.log(new Date("2016-04-01T00:00:00.000000+00:00"));
// It is very strange it says (Asia) at the end.
// In fact, it will say whatever I put in TZ
Fri Apr 01 2016 00:00:00 GMT+0000 (Asia)

# in Chrome developer tool
console.log(new Date());
Fri Apr 01 2016 08:00:00 GMT+0800 (CST)