Question

我正在使用AngularJS和HTML。如果我的选项是使用ng-repeat生成的，有没有办法在选项标签中预先选择一个选项？请参阅下面的代码段，例如： HTML：＆lt; select class =＆＃34; form-control＆＃34; ID =＆＃34; eventSelectMenu＆＃34;＆GT; ＆lt; option ng-repeat =＆＃34;选项在allEventData＆＃34;＆gt; {{option.name}}＆lt; / option＆gt; ＆LT; /选择＆GT; 我尝试了这里和这里提出的解决方案，但都没有成功。感谢您提供任何建议！

Answer 1

您可以尝试这种语法。此外，您需要使用ng-model，它将为您选择需要的值：

<select class="form-control"
        ng-model="yourmodel"
        ng-options="option for option in allEventData">
     </select>

Answer 2

您可以将任何应预先选择的项目设置为select ngModel

的值

console.clear();
angular.module('so-answer', [])
  .controller('ctrl', ['$scope',
    function($scope) {
      $scope.options = [1, 2, 3, 4, 5, 6];
      $scope.selected = 3;
    }
  ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="so-answer" ng-controller="ctrl">
  <select ng-model="selected" ng-options="opt for opt in options"></select>
</div>

Answer 3

除了已发布的答案外，我还要添加此答案。这个演示了如何使用对象数组进行选择。在这种情况下，假定allEventData中的事件具有name和value属性。相应地调整你的情况

＆＃13;

angular.module("app", [])
.controller("controller", function($scope){
  $scope.allEventData = [
    {
      value: 1,
      name: "Event 1"
    },
    {
      value: 2,
      name: "Event 2"
    },
    {
      value: 3,
      name: "Event 3"
    }
  ]
  
  $scope.selectedEventValue = 3
})

＆＃13;

<!DOCTYPE html>
<html ng-app="app" ng-controller="controller">

  <head>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <select class="form-control" id="eventSelectMenu" ng-model="selectedEventValue" ng-options="item.value as item.name for item in allEventData">      
    </select>
    <pre>Selected Value: {{selectedEventValue}}</pre>
  </body>

</html>

＆＃13;

Answer 4

您应该能够直接绑定属性，如

<option ng-repeat="option in allEventData" selected={{option.selected}}>{{option.name}}</option>

使用ng-repeat时，在<select>中预选<option>

5 个答案: