I have an application in angular where I need to register N boxes and inside each box N documents. Through the ng-repeat directive of angular and a javascript function I have managed to create the N boxes, but not with the documents because when I create the arrangement that will contain the information of them, when trying to add a new document within a box, a new document is created at the same time in the other boxes. I want to know how I can handle this, I have thought about creating dynamic arrangements that vary in the ng-repeat of the documents but it has not been possible. Any suggestions?
Javascript
class RequestAddController{
constructor($stateParams,$state, API, $http,$filter){
'ngInject';
var vm = this
this.API = API
this.lines=[]
this.clines=[]
this.alerts = []
this.description=[]
this.cardboard_id=[]
this.date_start=[]
this.date_end=[]
this.stay_time=[]
let i= 0;
this.lines = eval("this.lines"+i);
this.lines = []
this.lines.push({id : 0});
this.clines.push({id : 0});
this.$state= $state
this.request_type = 2
this.formSubmitted = false
if ($stateParams.alerts) {
this.alerts.push($stateParams.alerts)
}
let request= this.API.service('index', this.API.all('requests'))
request.one().get().then((response)=>{
let requestsResponse= response.plain()
this.request = requestsResponse.data.requests
//console.log(requestsResponse.data.requests.length)
if (this.request.length > 0){
let long= this.request.length
let date_today = new Date()
let year = date_today.getFullYear()
let month = date_today.getMonth()+1
let day = date_today.getDate()
this.id= this.request[long-1].id+1
var date = day+"-"+month+"-"+year
//console.log(year)
this.request_number="C"+"-"+this.id+"-"+date
//console.log("id",this.id)
}
else{
let long= this.request.length
let date_today = new Date()
let year = date_today.getFullYear()
let month = date_today.getMonth()+1
let day = date_today.getDate()
var date = day+"-"+month+"-"+year
this.id = 1
//console.log("this.id",this.id)
this.request_number = "C"+"-"+this.id+"-"+date
//console.log("this.request_number", this.request_number)
}
let date_today = new Date()
let year = date_today.getFullYear()
let month = date_today.getMonth()+1
let day = date_today.getDate()
date_today = year+"-"+month+"-"+day
this.date_request = date_today
console.log("fecha de hoy", this.date_request)
console.log(requestsResponse.data)
})
this.systemApplicants ={}
this.systemApplicants[0] = {id:1, name:'Solicitante 1' }
this.systemApplicants[1]= {id:2 , name:'Solicitante 2'}
console.log("systemApplicants",this.systemApplicants)
this.systemCardboards ={}
this.systemCardboards[0] = {id:1, name: 'Caja 1' }
this.systemCardboards[1]= {id:2 , name:'Caja 2'}
console.log("systemCardboards",this.systemCardboards)
}
addDoc() {
if (this.lines.length==0){
var newid = 0
}
else{
var newid = this.lines.length
}
this.lines.push({id : newid});
//console.log('lineas',this.lines)
//console.log('archivos',this.files)
}
addCardboard() {
if (this.clines.length==0){
var newid = 0
}
else{
var newid = this.clines.length
}
this.clines.push({id : newid});
var i= newid;
this.lines = eval("this.lines"+i);
this.lines = []
this.lines.push({id : 0});
console.log("docs", this.cline)
//console.log('lineas',this.lines)
//console.log('archivos',this.files)
}
deleteCLine(index){//eliminar de los archivos nuevos agregados
//console.log('antes')
//console.log('lines',this.lines)
//console.log('cardboard_id',this.cardboard_id)
//console.log('value',this.value)
//console.log('files',this.files)
let pos = this.clines.indexOf(index);
this.clines.splice(pos,1)
//console.log('pos',pos)
this.cardboard_id.splice(pos,1)
this.value.splice(pos,1)
this.file.splice(pos,1)
for(var i=0; i<this.cardboard_id.length;i++) this.cardboard_id[i] = parseInt(this.cardboard_id[i], 10);
let newcvalue = -1
let neclines = []
angular.forEach(this.clines, function (value) {
neclines.push({id : newcvalue+1})
newcvalue++
})
this.clines = neclines
//console.log('despues')
//console.log('cardboard_id',this.cardboard_id)
//console.log('value',this.value)
}
deleteLine(index){//eliminar de los archivos nuevos agregados
//console.log('antes')
//console.log('lines',this.lines)
//console.log('cardboard_id',this.cardboard_id)
//console.log('value',this.value)
//console.log('files',this.files)
let pos = this.lines.indexOf(index);
this.lines.splice(pos,1)
//console.log('pos',pos)
this.cardboard_id.splice(pos,1)
this.value.splice(pos,1)
this.file.splice(pos,1)
for(var i=0; i<this.cardboard_id.length;i++) this.cardboard_id[i] = parseInt(this.cardboard_id[i], 10);
let newvalue = -1
let nelines = []
angular.forEach(this.lines, function (value) {
nelines.push({id : newvalue+1})
newvalue++
})
this.lines = nelines
//console.log('despues')
//console.log('cardboard_id',this.cardboard_id)
//console.log('value',this.value)
}
/*getDateRequest(dater){
var date = new Date(dater)
console.log('date_request', date)
var day = dater.getDate();
var month = dater.getMonth() + 1;
var year = dater.getFullYear();
var date_r = year + '-' + month + '-'+ day;
this.date_request = date_r
console.log("date_request",this.date_request)
//return this.date_request
}
getDateStart(dates){
for (var i = 0; i < this.date_start.length; i++) {
var date = new Date(dates)
console.log('date_start', date)
var day = dates.getDate();
var month = dates.getMonth() + 1;
var year = dates.getFullYear();
var date_s = year + '-' + month + '-'+ day;
this.date_start[i] = date_s
console.log("date_start",this.date_start[i])
//return this.date_start
}
}
getDateEnd(datee){
for (var i = 0; i < this.date_end.length; i++) {
var date = new Date(datee)
console.log('date_end', date)
var day = datee.getDate();
var month = datee.getMonth() + 1;
var year = datee.getFullYear();
var date_e = year + '-' + month + '-'+ day;
this.date_end[i] = date_e
console.log("date_end",this.date_end[i])
//return this.date_end
}
}*/
save (isValid) {
//this.$state.go(this.$state.current, {}, { alerts: 'test' })
if (isValid) {
let requests= this.API.service('requests', this.API.all('requests'))
let $state = this.$state
console.log("date_start",this.date_start)
console.log("date_end",this.date_end)
const fd = new FormData()
/*for (var i = 0; i < this.date_start.length; i++) {
var date_start = new Date(this.date_start[i]);
var day = date_start.getDay();
var month = date_start.getMonth() + 1;
var year = date_start.getFullYear();
var date_s = year + '-' + month + '-'+ day;
this.date_start[i]= date_s
console.log("date_start",this.date_start[i])
}
for (var i = 0; i < this.date_end.length; i++) {
var date_end = new Date(this.date_end[i]);
var day = date_end.getDay();
var month = date_end.getMonth() + 1;
var year = date_end.getFullYear();
var date_e = year + '-' + month + '-'+ day;
this.date_end[i]= date_e
console.log("date_end",this.date_end[i])
}*/
fd.append('request_type', this.request_type)
fd.append('request_id', this.id)
fd.append('request_number', this.request_number)
fd.append('applicant_id', this.systemApplicants[0].id)
fd.append('date_request', this.date_request)
fd.append('cardboard_id', JSON.stringify(this.cardboard_id))
fd.append('description', JSON.stringify(this.description))
fd.append('date_start', JSON.stringify(this.date_start))
fd.append('date_end', JSON.stringify(this.date_end))
fd.append('observation', this.observation)
fd.append('stay_time', JSON.stringify(this.stay_time))
requests.post(fd).then(function() {
let alert = { type: 'success', 'title': 'Exito!', msg: 'La solicitud ha sido creada.' }
$state.go($state.current, { alerts: alert})
}, (response) => {
let alert = { type: 'error', 'title': 'Error!', msg: response.data.message }
$state.go($state.current, { alerts: alert})
})
} else {
this.formSubmitted = true
}
}
$onInit(){
}
}
export const RequestAddComponent = {
templateUrl: './views/app/components/request-add/request-add.component.html',
controller: RequestAddController,
controllerAs: 'vm',
bindings: {}
}
/*import Controller from '../../../classes/save.controller'
/**
* Agrega una nueva bodega al sistema.
*/
/*class CustodyCardboardRequestAddController extends Controller {
/**
* Método ejecutado al inicializar el controlador.
* Establece las configuraciones de la ruta actual.
*/
/*boot() {
this.route = 'custody_cardboard_requests'
this.states = 'custody_cardboard_request'
this.title = 'Solicitud de custodia de documentos en archivo general'
this.breadcrumbs = [
{name: 'Inicio', state:this.baseState, icon: 'fa fa-tachometer-alt'},
{name: 'Solicitud', state: this.listsState, icon: 'fa fa-archive'},
{name: 'Nueva', active: true}
]
}
}
export const CustodyCardboardRequestAddComponent = {
templateUrl: './views/app/components/custody_cardboard_request-add/custody_cardboard_request-add.component.html',
controller: CustodyCardboardRequestAddController,
controllerAs: 'vm',
bindings: {}
}*/
HTML<section class="content-header">
<div class="box-header with-border">
<h3 class="box-title" >Solicitud de custodia de documentos en archivo general</h3>
</div>
</section>
<br/>
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h1 class="box-title">Datos Básicos </small></h1>
</div>
<form class="form-horizontal" name="Form" ng-submit="vm.save(Form.$valid)" novalidate>
<div class="box-body">
<div ng-if="vm.alerts" class="alert alert-{{alert.type}}" ng-repeat="alert in vm.alerts">
<h4>{{alert.title}}</h4>
<p>{{alert.msg}}</p>
</div>
<!--<div class="form-group">
<div class="col-sm-6">
<label for="request_number" class="control-label"></i> Nro. Solicitud</label>
<input type="text"style="width: 140px" class="form-control" ng-model="vm.request_number" name="request_number" disabled="true">
</div>
</div>
<hr/>
<h4 class="box-title">Detalles</h4>-->
<table>
<tr>
<td><label for="applicant" class="control-label col-md-1">Solicitante</label></td>
<!--<td style="padding-left: 20px"><label for="date_request" class="control-label col-md-1">Fecha</label></td> -->
<td style="padding-left: 20px"><label for="observation" class="col-sm-1 control-label">Observaciones</label></td>
</tr>
<tr>
<td>
<div class="form-group" ng-class="{ 'has-error': Form.applicant.$invalid && ( vm.formSubmitted || Form.applicant.$touched) }">
<div class="col-sm-3">
<input type="text" style="width: 150px" class="form-control" name="applicant_id" ng-model="vm.systemApplicants[0].name" value="vm.systemApplicants[0].id" disabled="true">
<!--<select class="form-control" style="width: 250px" ng-model="vm.applicant_id" disabled="true" name="applicant">
<option value="1">Seleccione</option>-->
<!--<option ng-repeat="item in vm.systemApplicants" ng-value="item.id">{{item.name}}</option>
</select>-->
<p ng-show="Form.applicant.$error.required && ( vm.formSubmitted || Form.applicant.$touched)" class="help-block">Seleccione un aprovador.</p>
</div>
</div>
</td>
<!--<td >
<div class="form-group" ng-class="{ 'has-error': (form.date_request.$invalid && ( vm.formSubmitted || form.date_request.$touched)) || vm.hasErrors('date_request') }">
<div class="col-sm-3">
<input type="date" class="form-control" style='font-size: 14px; width: 150px;margin-left:20px' ng-model="vm.date_request" name="date_request" ng-focus="vm.cleanErrors('date_request')" ng-change="vm.getDateRequest(vm.date_request)" required>
<p ng-show="form.date_request.$error.required && ( vm.formSubmitted || form.date_request.$touched)" class="help-block">Requerido.</p>
<p ng-show="vm.hasErrors('date_request')" class="help-block">{{ vm.getError('date_request') }}</p>
</div>
</div>
</td>-->
<td >
<div class="form-group" ng-class="{ 'has-error': (Form.observation.$invalid && ( vm.formSubmitted || Form.observation.$touched)) || vm.hasErrors('observation') }">
<div class="col-sm-3">
<textarea class="form-control" style="width: 300px;margin-left:20px;margin-top: 20px" ng-model="vm.observation" name="observation" ng-focus="vm.cleanErrors('observation')"></textarea>
<p ng-show="vm.hasErrors('observation')" class="help-block">{{ vm.getError('observation') }}</p>
</div>
</div>
</td>
</table>
<hr/>
<h4 class="box-title">Cajas</h4>
<div ng-repeat="cline in vm.clines">
<div class="form-group" ng-class="{ 'has-error': Form.cardboard_id{{cline.id}}.$invalid && ( vm.formSubmitted || Form.cardboard_id{{cline.id}}.$touched) }">
<label for="cardboard_id{{cline.id}}" class="control-label col-sm-1">Nro.Caja</label>
<div class="col-sm-3">
<select style="width: 140px" class="form-control" ng-model="vm.cardboard_id[cline.id]" name="cardboard_id{{cline.id}}" required>
<option value="">Seleccione</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p ng-show="Form.cardboard_id{{cline.id}}.$error.required && ( vm.formSubmitted || Form.cardboard_id{{cline.id}}.$touched)" class="help-block">Seleccione una caja.</p>
</div>
</div>
<div class="box-header with-border" align="right">
<a class="btn btn-primary btn-sm" ng-click="vm.addCardboard();">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a class="btn btn-danger btn-sm" ng-show="vm.clines.length > 1" ng-click="vm.deleteCLine(cline);" >
<i class="glyphicon glyphicon-trash"></i>
</a>
</div>
<div ng-repeat="line in vm.lines" >
<fieldset>
<table>
<tr>
<td ><label for="description" class="col-sm-2 control-label">Descripción</label></td>
<td style="padding-left: 20px"><label for="date_start" class="control-label">Fecha Inicio</label></td>
<td style="padding-left: 40px"><label for="date_end" class="control-label">Fecha Fin</label></td>
<td style="padding-left: 40px"><label for="stay_time" class="control-label">Tiempo de permanencia</label></td>
</tr>
<tr>
<td>
<!-- Description -->
<div class="form-group" style="width:350px" ng-class="{ 'has-error': (Form.description{{cline.id}}{{line.id}}.$invalid && ( vm.formSubmitted || Form.description{{cline.id}}{{line.id}}.$touched)) || vm.hasErrors('description{{cline.id}}{{line.id}}') }">
<div class="col-sm-3">
<textarea class="form-control" style="width: 300px;margin-top: 20px;margin-right: 200px; " ng-model="vm.description[cline.id][line.id]" name="description{{cline.id}}{{line.id}}" ng-focus="vm.cleanErrors('description{{cline.id}}{{line.id}}')" required></textarea>
<p ng-show="vm.hasErrors('description{{cline.id}}{{line.id}}')" class="help-block">{{ vm.getError('description') }}</p>
</div>
</div>
</td>
<td>
<div class="form-group" ng-class="{ 'has-error': (Form.date_start{{cline.id}}{{line.id}}.$invalid && ( vm.formSubmitted || Form.date_start{{cline.id}}{{line.id}}.$touched)) || vm.hasErrors('date_start{{cline.id}}{{line.id}}') }">
<div class="col-sm-8">
<input type="date" class="form-control" style='font-size: 14px; width: 150px;' ng-model="vm.date_start[cline.id][line.id]" name="date_start{{cline.id}}{{line.id}}" ng-change="vm.getDateStart(vm.date_start{{cline.id}}{{line.id}})" ng-focus="vm.cleanErrors('date_start')" required>
<p ng-show="form.date_start{{cline.id}}{{line.id}}.$error.required && ( vm.formSubmitted || form.date_start{{cline.id}}{{line.id}}.$touched)" class="help-block">Requerido.</p>
<p ng-show="vm.hasErrors('date_start{{cline.id}}{{line.id}}')" class="help-block">{{ vm.getError('date_start') }}</p>
</div>
</div>
</td>
<td>
<div style="width:200px"class="form-group" ng-class="{ 'has-error': (Form.date_end{{cline.id}}{{line.id}}.$invalid && ( vm.formSubmitted || Form.date_end{{cline.id}}{{line.id}}.$touched)) || vm.hasErrors('date_end{{cline.id}}{{line.id}}') }">
<div class="col-sm-8">
<input type="date" class="form-control" style='font-size: 14px; width: 150px;margin-left:20px' ng-model="vm.date_end[cline.id][line.id]" name="date_end{{cline.id}}{{line.id}}" ng-change="vm.getDateEnd(vm.date_end{{cline.id}}{{line.id}})" ng-focus="vm.cleanErrors('date_end')" min="{{vm.date_start[cline.id][line.id] | date:'yyyy-MM-dd'}}" required>
<p ng-show="form.date_end{{cline.id}}{{line.id}}.$error.required && ( vm.formSubmitted || form.date_end{{cline.id}}{{line.id}}.$touched)" class="help-block">Requerido.</p>
<p ng-show="vm.hasErrors('date_end{{cline.id}}{{line.id}}')" class="help-block">{{ vm.getError('date_end') }}</p>
</div>
</div>
</td>
<td>
<div class="form-group" ng-class="{ 'has-error': (Form.stay_time{{cline.id}}{{line.id}}.$invalid && ( vm.formSubmitted || Form.stay_time{{cline.id}}{{line.id}}.$touched)) || vm.hasErrors('stay_time') }">
<div class="col-sm-7">
<select style="width: 140px;margin-left:40px" class="form-control" name="stay_time{{cline.id}}{{line.id}}" ng-model="vm.stay_time[cline.id][line.id]" required>
<option value="">Seleccione</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p ng-show="vm.hasErrors('stay_time')" class="help-block">{{ vm.getError('stay_time') }}</p>
</div>
</div>
<td>
</tr>
</table>
</div>
<div class="box-header with-border" align="right">
<a class="btn btn-primary btn-sm" ng-click="vm.addDoc()">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a class="btn btn-danger btn-sm" ng-show=" vm.lines.length > 1 " ng-click="vm.deleteLine(line)" >
<i class="glyphicon glyphicon-trash"></i>
</a>
</div>
</fieldset>
</div>
<div class="box-footer">
<a ui-sref="app.request-lists" class="btn btn-default"><i class="fa fa-angle-double-left"></i> Regresar</a>
<button type="submit" class="btn btn-primary pull-right">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</section>