Как использовать Nested ng-repeat для динамического повторения столбцов таблицы?

Question

Я хочу создать динамические столбцы таблицы и создать новый объект, чтобы сохранить его в mongoDb.

У меня есть первый массив учеников:

students = [{id: "1", name: "abc"},{id: "2", name: "def"},{id: "3", name: "hij"}]

и второй массив объектов:

subjects = [{sName: "maths"},{sName: "science"}]

Вот HTML

<div ng-app='t' ng-controller='test'>
    <table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th ng-repeat="subject in subjects">{{subject.sName}}</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in finalData track by $index">
            <th><input type="text" ng-model="row.rollNo"/></th>
            <th><input type="text" ng-model="row.fullName"></th>
            <th ng-repeat="subject in subjects"><input type="text" ng-model="row.marks"></th>
            <th>
      <button ng-click="action($index)">
        add/remove
      </button></th>
        </tr>
    </tbody>
</table>
</div>

Вот контроллер

(function(){

    var app = angular.module('t', []);

    app.controller('test', 
      [
          '$scope', 
          function($scope)                            
          {
            $scope.students = [{id: "1", name: "abc"},{id: "2", name: "def"},{id: "3", name: "hij"}]

            $scope.subjects = [{sName: "maths"},{sName: "science"}]
            $scope.finalData = new Array();
            $scope.finalData.push({
                icon : false
            });

            $scope.action=function(index){
                if(index ==  $scope.finalData.length-1){
                     $scope.finalData[index].icon = true;

                     $scope.finalData.push({
                        icon : false
                    });

                }else{
                         $scope.finalData.splice(index, 1);
                }
            };

            }
      ]);

})();

Вывод выглядит следующим образом.

Столбцы отметок повторяют аналогичные значения. Но я хочу, чтобы один finalObject сохранил мои данные.

Вот jsFiddle моей проблемы https://jsfiddle.net/g8tn71tr/

Answer 1

Предметы строки ссылаются на одну и ту же NgModel row.marks, что делает их одинаковыми.

Вы можете решить эту проблему, заставив модель ng обратиться к каждому из предметов ng-model="row.marks[subject.sName]". Это приведет к тому, что row.marks станут объектом, где каждый предмет будет ключом, а модель будет иметь значение

(function(){

    var app = angular.module('t', []);

    app.controller('test', 
      [
          '$scope', 
          function($scope)                            
          {
            $scope.students = [{id: "1", name: "abc"},{id: "2", name: "def"},{id: "3", name: "hij"}]

            $scope.subjects = [{sName: "maths"},{sName: "science"}]
            $scope.finalData = new Array();
            $scope.finalData.push({
                icon : false
            });

            $scope.action=function(index){
            console.clear();
            console.log($scope.finalData[index]);
                if(index ==  $scope.finalData.length-1){
                     $scope.finalData[index].icon = true;

                     $scope.finalData.push({
                        icon : false
                    });

                }else{
                         $scope.finalData.splice(index, 1);
                }
            };

            }
      ]);

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='t' ng-controller='test'>
    <table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th ng-repeat="subject in subjects">{{subject.sName}}</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in finalData track by $index">
            <th><input type="text" ng-model="row.rollNo"/></th>
            <th><input type="text" ng-model="row.fullName"></th>
            <th ng-repeat="subject in subjects"><input type="text" ng-model="row.marks[subject.sName]"></th>
            <th>
      <button ng-click="action($index)">
        add/remove
      </button></th>
        </tr>
    </tbody>
</table>
</div>