To solve this problem a filter
must be created with the name range
and when typing use ng-repeat
to construct rows and columns, example basic:
var app = angular.module("app", []);
app.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
};
});
app.controller("ctrl", ["$scope", function($scope) {
$scope.line = 3;
$scope.column = 4;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div> Linha:
<input ng-model="line">
</div>
<div> Coluna:
<input ng-model="column">
</div>
<table border="1">
<tr ng-repeat="l in [] | range:line">
<td ng-repeat="c in [] | range: column">{{l + 1}} : {{c + 1 }}</td>
<tr>
</table>
</div>
Deleting rows and columns should be done by decreasing or increasing the values by the box, as it is a dynamic value, of course this can be implemented in each row or column, example / strong>:
var app = angular.module("app", []);
app.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
};
});
app.controller("ctrl", ["$scope", function($scope) {
$scope.line = 3;
$scope.column = 4;
$scope.delLine = function(){
if ($scope.line > 0) $scope.line--;
}
$scope.delColumn = function(){
if ($scope.column > 0) $scope.column--;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div> Linha:
<input ng-model="line">
</div>
<div> Coluna:
<input ng-model="column">
</div>
<table border="1">
<tr ng-repeat="l in [] | range:line">
<td ng-repeat="c in [] | range: column">
<button type="button" ng-click="delLine()">Remover Linha</button>
<button type="button" ng-click="delColumn()">Remover Coluna</button>
</td>
<tr>
</table>
</div>
Now it's up to you to creatively make the best use of both examples.
According to the comment, a example is very similar:
var app = angular.module("app", []);
app.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
};
});
app.controller("ctrl", ["$scope", function($scope) {
// criando variavel de perguntas
$scope.answer = ["Sim", "Não"];
// criando variavel de questão
$scope.question = [{
'name': "P 1",
'r': [false, false]
},
{
'name': "P 2",
'r': [false, false]
}
];
// adicionando pergunta
$scope.addAnswer = function() {
$scope.answer.push("R" + (new Date().getTime()));
for (i = 0; i < $scope.question.length; i++) {
$scope.question[i].r.push('false');
}
};
// excluindo pergunta
$scope.delAnswer = function(index) {
$scope.answer.splice(index, 1);
for (i = 0; i < $scope.question.length; i++) {
$scope.question[i].r.splice(index - 1, 1);
}
};
// adicionando questão
$scope.addQuestion = function() {
$r = $scope.answer.map(function() {
return false;
});
$scope.question.push({
'name': 'P' + (new Date().getTime()),
'r': $r
});
};
// excluindo questão
$scope.delQuestion = function(index){
$scope.question.splice(index, 1);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<table border="0">
<tr>
<td>Perguntas:</td>
<td ng-repeat="a in answer">
<input value="{{a}}" style="width:40px" />
<button ng-click="delAnswer($index)"> - </button>
</td>
<td><button type="button" ng-click="addAnswer()"> + </button></td>
</tr>
<tr ng-repeat="q in question">
<td><input value="{{q.name}}" /></td>
<td ng-repeat="b in q.r track by $index">
<input type="radio" name="{{q.name}}" />
</td>
<td><button ng-click="delQuestion($index)"> - </button>
</tr>
<tr>
<td>
<button ng-click="addQuestion()"> + </button>
</td>
<tr>
</table>
</div>
</div>