1

I want to make dynamic columns of a table and create a new object to save it in mongoDb.

I have first Array of Student as:

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

and have second Array of Subjects as:

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

Here is the 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>

Here is the Controller

(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);
                }
            };

            }
      ]);

})();

The Output Looks like this.8

The marks columns are repeating similar values. But i want one single finalObject to save my data.

Here is the jsFiddle of my problem https://jsfiddle.net/g8tn71tr/

1 Answer 1

1

The row subjects refer to the same NgModel row.marks which makes them have the same value.

You can solve it by making the ng-model refer to each of the subjects ng-model="row.marks[subject.sName]". This will result in that row.marks will become an object where each subject will be a key and the model will be in its value

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.