I am new on Angularjs and this is my first post on a forum but I tried for a long time to create a dynamic matrix by using angularjs. After some research i'm not sure that what i want to do is really possible by using Angularjs. let me show you a picture which can explain what i expect :
For example, for this picture i would like to create this JSON object :
{ "row1": { "column1": 0, "column2": 1, "column3": 2 } "row2": { "column1": 2, "column2": 0, "column3": 3 }} And of course we can add a new column or a new row with different names, that's why it's dynamic. For the moment i have this in term of code :
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="js/addMatrix.js"></script> </head> <body> <div ng-app="App" ng-controller="MainCtrl"> <p>Add a new element :</p> <table> <tr> <td data-ng-repeat="data in texts"> <button>{{data.text}}</button> </td> <td data-ng-repeat="field in fields"> <form ng-submit="submit(text)"> <input type="text" ng-model="text" name="text" placeholder="New Category" /> </form> </td> <td> <button ng-click="addNewChoice()">+</button> </td> </tr> </table> <div ng-if="texts.length > 0 && hasMatrix"> <table> <tr> <td> <p></p> </td> <td data-ng-repeat="column in columns">{{column.id}}</td> </tr> <tr data-ng-repeat="row in rows"> <td>{{row.id}}</td> <td data-ng-repeat="column in columns"> <select name="singleSelect"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> </tr> </table> <br/> <button ng-click="addColumn()">Add a column</button> <button ng-click="addRow()">Add a row</button> <button>Validate</button> <br /> <br /> <form ng-submit="process(data)" ng-if="hasClicked"> name : <input type="text" ng-model="data" name="data" placeholder="name" /> </form> </div> <div ng-if="texts.length > 0 && !hasMatrix"> <button ng-click="create()">Create a new Matrix</button> </div> <div ng-if="firstRowColumn"> <form> First row's name : <input type="text" ng-model="matrix.row" name="row" placeholder="New Category" /><br /> First Column's name : <input type="text" ng-model="matrix.column" name="column" placeholder="New Category" /><br /> <input type="submit" ng-click="createFirst(matrix)" value="generate" /> </form> </div> </div> </body> </html>Angularjs
var myApp = angular.module('App', []); myApp.controller('MainCtrl',function ($scope) { $scope.fields=[]; $scope.texts=[]; $scope.hasMatrix = false; $scope.hasClicked = false; $scope.firstRowColumn = false; $scope.hasNewRow = false; $scope.hasNewColumn = false; $scope.rows=[]; $scope.columns=[]; $scope.test = { singleSelect: null, }; $scope.addNewChoice = function() { var newItem = $scope.fields.length + 1; if (newItem < 2) { $scope.fields.push({'id' : 'field' + newItem}); } }; $scope.process = function(data) { if ($scope.hasNewRow) { $scope.rows.push({'id' : data}); } if ($scope.hasNewColumn) { $scope.columns.push({'id' : data}); } $scope.hasNewColumn = false; $scope.hasNewRow = false; $scope.hasClicked = false; }; $scope.addRow = function() { $scope.hasClicked = true; $scope.hasNewRow = true; }; $scope.addColumn = function() { $scope.hasClicked = true; $scope.hasNewColumn = true; }; $scope.create = function(field) { $scope.input = field; }; $scope.submit = function(text) { var lastItem = $scope.fields.length - 1; $scope.fields.splice(lastItem); $scope.texts.push({'text' : text}); }; $scope.create = function() { $scope.firstRowColumn = true; }; $scope.createFirst = function(matrix) { $scope.firstRowColumn = false; $scope.hasMatrix = true; $scope.rows.push({'id' : matrix.row}); $scope.columns.push({'id' : matrix.column}); } });If anyone can help me it will be great. Thank you
