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
