Question

我的HTML页面中有一个下拉列表，如下所示：

<select id="monthBox" ng-model="month">
    <option value="{{month}}" ng-repeat="month in months">{{month}}</option>
</select>

下拉列表的数据源为months，并且已绑定到模型month。最初它的数字从07到12，默认选择为07：

但是，此数据源会发生变化。例如，用户点击“明年”之后＆＃39;按钮，列表变为[01,02 ...，12]。

我想要实现的是，所选值应保持为07.但是当列表更改时，所选值将自动清空。它变为01或空选项，具体取决于我测试的浏览器和设备。

我尝试过以下解决方案，但都没有效果：

1。点击明年＆＃39;按钮，我更新模型。在控制器中，我再次将其设为07：

$scope.model = '07';

但是，即使模型已更新，下拉列表仍会显示01。

2。我已尝试以编程方式设置DOM的值，如下所示：

var element = document.getElementById('monthBox');
element.value = $scope.month;

但是，这也没有任何效果。下拉列表仍显示01。

有什么建议吗？感谢。

Answer 1

主要的问题是您在$scope.model = '07';为ngModel时将值分配给$scope.month，以便让它发挥作用应该做到以下几点：

$scope.month = '07';

另外，我建议您使用ngOptions代替ngRepeat。 ngOptions完全针对<select>代码制作。

看看简单正在运行的演示：

＆＃13;

(function() {
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl($scope) {
    $scope.months = [];
    $scope.month = "07";

    function load(i, maxSize) {
      while (++i <= maxSize) {
        $scope.months.push(i < 10 ? "0" + i : i);
      }
    }

    load(6, 12);

    $scope.loadMore = function() {
      load(0, 6);
      $scope.month = "07";
    }
  }
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <select ng-options="month for month in months | orderBy: 'toString()'" ng-model="month">
  </select>
  <hr>
  <button type="button" value="load" ng-click="loadMore()">Load more</button>
</body>

</html>

＆＃13;

我希望它有所帮助！

Answer 2

尝试将ng-show与$ index或limitTo filer。

一起使用

<select id="monthBox" ng-model="month">
    <option value="{{month}}" ng-repeat="month in months" ng-show="$index > 6">{{month}}</option>
</select>

或

<select id="monthBox" ng-model="month">
        <option value="{{month}}" ng-repeat="month in months | limitTo: 12:7">{{month}}</option>
    </select>

您可以在第一个示例中将6更改为变量。

设置HTML选择的值

2 个答案: