如何使用ng-repeat从下拉列表中预选择特定元素

时间:2019-04-04 14:52:25

标签: javascript html angularjs

这是我的html代码:

<select id="selectFileType" ng-model="instance.fileType" required>
  <option ng-repeat="(key, value) in fileTypes" id="key" value="{{key}}">{{key}} ({{value}})</option>
</select>

我正在使用一张商品地图来填充信息列表-现在我想根据该键预先选择一个特定元素,但是我发现的所有解决方案都行不通。

例如我试图使用id字段来使用类似:     document.getElementById(“ A”)。selected = true;

有人知道我该怎么做吗?

谢谢,祝你有美好的一天

1 个答案:

答案 0 :(得分:0)

使用ng-selected指令设置您的预选选项。

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.vm = {
      priceTypes: [{
          id: 3,
          name: 'pound'
        },
        {
          id: 5,
          name: 'Yen'
        },
        {
          id: 6,
          name: 'dollar'
        }
      ]
    };
    //select model value
    $scope.localModel = {
      priceType: $scope.vm.priceTypes[1]
    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="localModel.priceType">
  <option 
            ng-repeat="item in vm.priceTypes as item"
            ng-selected="localModel.priceType.id == item.id"
            value="{{item}}"
            >{{item.name}}</option>
</select>
  <div>
    priceType: {{ localModel.priceType }}
  </div>
</div>