如何在多个选择下拉列表中设置默认值angular js

时间:2017-02-22 15:40:29

标签: javascript html angularjs

我有一个多选下拉列表,如下所示

<select id="year" multiple ng-model="type"  ng-disabled="!type1" >
    <option value="all" selected>all</option>
    <option value='2012'>2012</option>
    <option value='2013'>2013</option>
    <option value='2014'>2014</option>
    <option value='2015'>2015</option>
    <option value='2016'>2016</option>
    <option value='2017'>2017</option>
    <option value='2018'>2018</option>
    <option value='2019'>2019</option>
</select>

我想设置选项&#34; all&#34;作为默认值。为此,我写了#34;选择&#34;选项标记内的关键字,我希望在我的下拉列表中默认显示,如上面的代码所示。但它没有用。任何人都可以帮助我如何设置默认值。

2 个答案:

答案 0 :(得分:1)

您可以在控制器中设置默认值。请记住,多选的值是一个数组,因此您必须将$scope.type设置为数组。这是一个有效的例子:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.type = ["all"];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select id="year" multiple ng-model="type">
      <option value="all" selected>all</option>
      <option value='2012'>2012</option>
      <option value='2013'>2013</option>
      <option value='2014'>2014</option>
      <option value='2015'>2015</option>
      <option value='2016'>2016</option>
      <option value='2017'>2017</option>
      <option value='2018'>2018</option>
      <option value='2019'>2019</option>
  </select>
  <div>
    {{type}}
  </div>
</div>

答案 1 :(得分:0)

Angular的方式是使用ng-options

<select ng-model="type" ng-options="o for o in options"/>

其中options是控制器中的数组:

$scope.options = [2012, 2013, 2014, 2015, 2016, ...];

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.options = [2011, 2012, 2013, 2014];
}
<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-options="o for o in options" ng-model="type">
    <option value="">all</option>
  </select>
  <br>selected: {{type}}
</div>