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来保存我的数据。

以下是我的问题 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>

如何使用嵌套的ng-repeat动态重复表列？

1 个答案: