AngularJS - 在 ng-repeat 内的选择上设置默认值[重复]

AngularJS

在AngularJS中，ng-repeat指令是一个非常有用的指令，它用于在HTML模板中重复显示数据。然而，在使用ng-repeat时，有时候我们需要为每个重复项设置一个默认值。本文将介绍如何在ng-repeat内部为选择框设置默认值，并给出相应的示例代码。

当我们使用ng-repeat指令来重复显示选择框时，我们可能希望默认选中某个选项。为了实现这个目标，我们可以使用ng-selected指令和一个表达式来设置默认值。

下面是一个简单的示例，演示了如何在ng-repeat内为选择框设置默认值：

html
<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedFruit">
    <option ng-repeat="fruit in fruits" ng-selected="fruit == 'Apple'">{{fruit}}</option>
  </select>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.fruits = ['Apple', 'Orange', 'Banana'];
    $scope.selectedFruit = 'Apple';
  });
</script>

在上面的代码中，我们使用ng-repeat指令来重复显示fruits数组中的每个水果。通过ng-selected指令，我们将表达式fruit == 'Apple'与每个选项关联起来。如果表达式的值为true，则相应的选项将被默认选中。

在这个例子中，我们将默认选中"Apple"这个选项，因为在控制器中，我们将$scope.selectedFruit的初始值设置为"Apple"。

在实际应用中，我们可以根据需要将默认值设置为任何选项。这个例子只是为了演示如何在ng-repeat内部为选择框设置默认值。

示例代码

html
<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedFruit">
    <option ng-repeat="fruit in fruits" ng-selected="fruit == 'Apple'">{{fruit}}</option>
  </select>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.fruits = ['Apple', 'Orange', 'Banana'];
    $scope.selectedFruit = 'Apple';
  });
</script>

通过上面的示例，我们可以看到如何在ng-repeat内为选择框设置默认值。使用ng-selected指令和适当的表达式，我们可以轻松地实现这个目标。无论是在简单的示例还是在实际应用中，这个技巧都非常有用。希望本文对你理解如何在ng-repeat内设置选择框的默认值有所帮助。