0
ブートストラップカレンダーの日付で選択した日付を表示しようとしていますが、選択した日付の値が表示されません。編集オプションを選択すると日付が正しく表示され、アイテムリストに更新されますが、タグ「Vigencia Desde Updated」の後に更新されていないカレンダーから日付を変更した場合。カレンダーで選択されている日付が表示されない
私はそれについて助けていただきありがとうございます。
app.js
angular.module('mainApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('mainApp').controller('NotificacionController', function($scope) {
$(document).ready(function(){
$('.input-group.date').datetimepicker({
locale: 'es',
});
});
var self = this;
self.notificacion = {
id: null,
vigenciaDesde: null,
vigenciaHasta: null,
cuotas: "",
marca: ""
}
self.notificaciones = [
{
id: 1,
vigenciaDesde: new Date(2016, 9, 1),
vigenciaHasta: new Date(2016, 9, 8),
cuotas: "3 cuotas",
marca: "Nike"
}, {
id: 2,
vigenciaDesde: new Date(2016, 10, 1),
vigenciaHasta: new Date(2016, 10, 20),
cuotas: "6 cuotas",
marca: "Adidas"
}
]
self.edit = function(id) {
console.log('id to be edited', id);
for (var i = 0; i < self.notificaciones.length; i++) {
if (self.notificaciones[i].id == id) {
self.notificacion = angular.copy(self.notificaciones[i]);
break;
}
}
}
self.reset = function(){
self.notificacion={id:null, vigenciaDesde:null, vigenciaHasta:null, cuotas:'', marca:''};
$scope.myForm.$setPristine(); //reset Form
};
});
index.htmlを
<!doctype html>
<html ng-app="mainApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<!--script src="https://code.angularjs.org/1.0.7/i18n/angular-locale_es-ar.js"></script-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style-->
<div ng-controller="NotificacionController as ctrl">
<!-- Row Cuotas -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Cuotas</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.notificacion.cuotas" name="cuotas" class="cuotas form-control input-sm" placeholder="Cuotas" />
</div>
</div>
</div>
<!-- Row Marca -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Marca</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.notificacion.marca" name="marca" class="marca form-control input-sm" placeholder="Marca" />
</div>
</div>
</div>
<!-- Row Tipo de Vigencia Desde -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Desde</label>
<div class="col-md-7">
<div class='input-group date'>
<input type='text' class="form-control ctrl.notificacion.vigenciaDesde input-sm" id="vigenciaDesde" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy'">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!-- Row Tipo de Vigencia Hasta -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Hasta</label>
<div class="col-md-7">
<div class='input-group date vigenciaHasta' name="vigenciaHasta">
<input type='text' class="form-control vigenciaHasta" id="vigenciaHastaId" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Desde Updated</label>
<div ng-model="ctrl.notificacion.vigenciaDesde">
<pre>Vigencia Desde Updated: <em>{{ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy' }}</em></pre>
</div>
</div>
</div>
<div class="row">
<div class="form-actions floatRight">
<button type="button" ng-click="ctrl.reset()" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset Form</button>
</div>
</div>
<br/>
<div class="panel panel-default">
<div class="panel-heading"><span class="lead">Lista de Notificaciones Existentes </span></div>
<div class="tablecontainer">
<table class="table table-hover">
<thead>
<tr>
<th>ID.</th>
<th>Vigencia Desde</th>
<th>Vigencia Hasta</th>
<th>Cuotas</th>
<th>Marca</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in ctrl.notificaciones | orderBy:'id'">
<td><span ng-bind="n.id"></span></td>
<td><span ng-bind="n.vigenciaDesde | date:'dd/MM/yyyy'"></span></td>
<td><span ng-bind="n.vigenciaHasta | date:'dd/MM/yyyy'"></span></td>
<td><span ng-bind="n.cuotas"></span></td>
<td><span ng-bind="n.marca"></span></td>
<td>
<button type="button" ng-click="ctrl.edit(n.id)" class="btn btn-success custom-width">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
plunkerリンク：
http://plnkr.co/edit/KFA4AsgQdItUfSWVc1Ag
ありがとうございました！ @svarog！ –