将嵌套 ng-repeat 绑定到模型

Question

在下面的例子中，我要问六个学生的名字。它们将根据卧室类型进行分组。

2 -> 双
1 -> 单身
3 -> 标题

所以，这意味着我将有一组学生（6 个学生）。我想知道他们的名字。我试图创建一个像 'count' 这样的变量，并将其作为输入的 ng-model 并在循环期间递增，但它没有用。

完整 html:

<!doctype html>
<html ng-app="sampleApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller='SampleController'>
    <div ng-repeat='i in numberOfAccommodations track by $index'>
        Bedroom {{$index}}

        <span ng-repeat='x in numberOfStudents[$index]'>
            Student {{$index}}

            <input type='text' ng-model='abroadStudents[???].name' /> <!-- this input to student model -->
        </span>         
    </div>
    <input type='button' value='test' ">
    <script>
        angular.module('sampleApp',[]).controller('SampleController',function($scope){

            $scope.abroadStudents = new Array[6];

            $scope.abroadAccommodation = new Array();
            $scope.abroadAccommodation.push({ "bedroomType": 2}, { "bedroomType": 1 }, {"bedroomType": 3});

            $scope.numberOfAccommodations = function()
            {
                var arr = new Array();

                for (var i = 0 ; i < $scope.abroadAccommodation.length ; i++)
                {
                    arr.push(i);
                }

                return arr;
            }();            

            $scope.numberOfStudents = function()
            {
                var arr = new Array();

                for (var x = 0 ; x < $scope.abroadAccommodation.length ; x++)
                {
                    var temp = 0;
                    var intArr = new Array();

                    do
                    {
                        intArr.push(temp);
                        temp++;
                    }
                    while(temp < $scope.abroadAccommodation[x].bedroomType);

                    arr.push(intArr);
                }

                return arr;
            }();            

        });


    </script>
  </body>
</html>

Answer 1

我重写了您的逻辑以创建一个不需要依赖 $index 的更符合逻辑的对象结构。它创建一个 room 对象数组，然后遍历 abroadAccommodation 数组。对于每个 abroadAccommodation，它会添加一个房间，并根据类型添加适当数量的 student 对象。然后很容易使用 ng-repeat 遍历每个 room 来识别每个 student.

注意我在这里也使用 angular.forEach。

<!doctype html>
<html ng-app="sampleApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body ng-controller='SampleController'>
  <div ng-repeat="room in rooms">
    {{room.roomNum}}
    <div ng-repeat="student in room.students">
      {{student.bed}}
      <input ng-model="student.name" />
    </div>
  </div>

  Student List:
  <div ng-repeat="room in rooms">
    <div ng-repeat="student in room.students">
      {{student.name}}
    </div>
  </div>

  <script>
    angular.module('sampleApp', []).controller('SampleController', function($scope) {

      $scope.abroadAccommodation = new Array();
      $scope.abroadAccommodation.push({
        "bedroomType ": 2
      }, {
        "bedroomType ": 1
      }, {
        "bedroomType ": 3
      });

      $scope.rooms = function() {
        var arr = [];
        angular.forEach($scope.abroadAccommodation, function(type, count) {

          var room = {
            "roomNum": "room " + (count + 1),
            students: []
          };
          angular.forEach(type, function(numBeds) {

            for (i = 0; i < numBeds; i++) {
              room.students.push({
                "bed": "bed " + (i + 1),
                "name": "student" + Math.random()
              });
            }
            arr.push(room);
          })

        });

        return arr;
      }();

    });
  </script>
</body>

</html>

http://plnkr.co/edit/YaPo54NUBPk9AnZkGcCc?p=preview

将嵌套 ng-repeat 绑定到模型

bind nested ng-repeat to model

angularjs

ng-repeat

angularjs-ng-repeat