Question

我正在尝试以角度创建月份的下拉日期，其中所选数字将被传递到elasticsearch查询中。
问题是，为了拥有“全天”选项，查询要求所有内容都输入为“*”。
如果我也用*之类的方式显示all选项，代码就可以工作，但显然对于用户来说这不是很易读：

JS

$scope.daysInMonthArray = ['*']
$scope.day = $scope.daysInMonthArray[0];

$scope.daysInMonth = function (month, year) {
  return 32 - new Date(year, month, 32).getDate()
};

for (var i=0; i < $scope.daysInMonth(n, $scope.year); i++) {
  $scope.daysInMonthArray.push(i + 1)
}

HTML

<select
  class="form-control"
  ng-model="day"
  ng-options="day for day in daysInMonthArray">
</select>

我试图通过以下方式让它以“*”的值显示“all”这个词，但它不起作用。它发送回查询的内容只是说'[object Object]'。

JS

$scope.daysInMonthArray = [{'name': 'all', 'value': '*'}]
$scope.day = $scope.daysInMonthArray[0];

$scope.daysInMonth = function (month, year) {
  return 32 - new Date(year, month, 32).getDate()
};

for (var i=0; i < $scope.daysInMonth(n, $scope.year); i++) {
  $scope.daysInMonthArray.push({'name': i + 1, 'value': i + 1})
}

HTML

<select
  class="form-control"
  ng-model="day"
  ng-options="day as day.name for day in daysInMonthArray track by day.value">
</select>

我是不是错误地写了第二个，还是有更好的方法来解决这个问题？

Answer 1

我们可以将日期作为值和标签对象传递给select。通过这种方式，我们可以配置价值和标签内容。

<强> app.js

  var n = 1;
  $scope.year = 2016;

  $scope.daysInMonthArray = [{'value':'*', 'label':'all'}]
  $scope.day = $scope.daysInMonthArray[0];

  $scope.daysInMonth = function (month, year) {
    return 32 - new Date(year, month, 32).getDate()
  }

  for (var i=0; i < $scope.daysInMonth(n, $scope.year); i++) {
    $scope.daysInMonthArray.push(
      {
        'value':i + 1,
        'label':i+1
      })
  }

  $scope.day = $scope.daysInMonthArray[0].value;

因此您的选择将是

 <select
  class="form-control"
  ng-model="day"
  ng-options="day.value as day.label for day in daysInMonthArray">
</select>

角度选择选项不起作用

1 个答案: