Angularjs - 如何“ng-repeat”div以获得“ng-model”次的值

AngularJS

使用AngularJS的ng-repeat指令可以很方便地重复渲染HTML元素。在某些情况下，我们可能需要在每个重复的div元素上绑定不同的ng-model值。本文将介绍如何使用ng-repeat指令来获取不同的ng-model值，并提供一个简单的示例代码。

在AngularJS中，ng-repeat指令用于循环渲染HTML元素。我们可以使用ng-repeat指令来重复渲染div元素，并使用ng-model指令来绑定不同的值。

下面是一个简单的示例代码，展示了如何使用ng-repeat指令在div元素上绑定不同的ng-model值：

html
<div ng-repeat="value in values">
  <input type="text" ng-model="value">
</div>

在上面的示例中，ng-repeat指令循环渲染div元素，并在每个div元素中创建一个文本输入框。通过ng-model指令，我们将每个文本输入框与不同的值绑定起来。

接下来，我们需要在AngularJS控制器中定义一个数组来存储这些值。在控制器中，我们可以使用$scope对象来定义values数组，并初始化一些默认值。

Javascript
app.controller('MyController', function($scope) {
  $scope.values = ['Value 1', 'Value 2', 'Value 3'];
});

在上面的示例中，我们使用$scope对象定义了一个名为values的数组，并初始化了三个默认值。

现在，当我们运行应用程序时，ng-repeat指令会根据values数组的长度重复渲染div元素，并将每个div元素上的ng-model值绑定到values数组中相应位置的值。

在这个例子中，我们通过ng-repeat指令在div元素上动态地创建了三个带有不同ng-model值的文本输入框。这意味着我们可以分别访问和操作每个文本输入框的值。

示例代码：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('MyController', function($scope) {
      $scope.values = ['Value 1', 'Value 2', 'Value 3'];
    });
  </script>
</head>
<body ng-controller="MyController">
  <div ng-repeat="value in values">
    <input type="text" ng-model="value">
  </div>
</body>
</html>

在上面的示例代码中，我们创建了一个名为myApp的AngularJS应用程序，并定义了一个名为MyController的控制器。在控制器中，我们初始化了一个values数组，并将其绑定到ng-repeat指令中。

最终结果是，我们将获得一个显示了三个带有不同ng-model值的文本输入框的页面。通过修改这些文本输入框中的值，我们可以分别访问和操作每个文本输入框的值。

通过使用AngularJS的ng-repeat指令和ng-model指令，我们可以很方便地在重复的div元素上绑定不同的ng-model值。这使得我们可以轻松地访问和操作每个重复元素的值。在本文中，我们介绍了如何使用ng-repeat指令来重复渲染div元素，并绑定不同的ng-model值，并提供了一个简单的示例代码来演示这个过程。