2
I’m trying to make a dynamic table, where it will work as follows: - they will have 2 input fields type text, one for the text value of the row and one for the column, each with an "add" button; - the ideal would be to be able to exclude rows and columns once created.
4
To solve this problem a filter by the name of range and at the time of typing use ng-repeat to build 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>
<script src="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>The deletion of rows and columns should be done by decreasing or increasing the values by the box, for being a dynamic value, of course this can be implemented in each row or column, example:
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>
<script src="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 use your creativity in the best way the two examples.
According to the commentary, a example good-looking:
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>
<script src="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>References:
Browser other questions tagged angularjs
You are not signed in. Login or sign up in order to post.
And ai Isa was just what you needed?
– novic
And oh Isa I’m here again to ask you and then the answer served you?
– novic
@Virgilionovic didn’t solve it but it helped. Thank you
– Isa
Lacked the buttons to add the columnars and lines instead of typing ? If Voce interact we can shape
– novic
@Virgilionovic that’s right, I’m using your example but I’m still getting caught up in changing to this form :(
– Isa
@Virgilionovic is that his example, I define by the inputs the values of the rows and columns, but in fact, the inputs serve only to type of the values of the text, and through the button I would add the row or column, I do not know if I was clear
– Isa
Do you have the example gives dynamic table made in Jquery? maybe the concept is other and I besides these two example post equal of jQuery?
– novic
@Virgilionovic I didn’t do this but it’s a pretty cool example that I found here in the stackoverflow done in Vue: https://jsfiddle.net/ejmc2rre/ the idea is well inside this
– Isa
is there an example similar to Vue! I hope you like it!
– novic
@Virgilionovic got really good!!! I will take your example!!! :)
– Isa
@Virgilionovic, not to abuse your example, but could you comment on the lines? Because I’m trying to understand how it works and there are some things I don’t understand how you did
– Isa
Pronto @Isa....
– novic