Question

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

2 - ＆gt;
1 - ＆gt;单
3 - ＆gt; tiple

所以，这意味着我将有一系列学生（6名学生）。我想得到他们的名字。我试图创建一个像'count'这样的变量，并在循环期间输入作为输入和增量的ng模型，但它不起作用。

完整的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。

＆＃13;

<!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>

＆＃13;

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

将嵌套的ng-repeat绑定到模型

1 个答案: