1. ホーム
  2. 質問と答え
  3. uibootsrap double datepicker-popupがngmodelを更新しない

uibootsrap double datepicker-popupがngmodelを更新しない

2017-11-09 8 views
0

私は情報を編集して追加するための簡単なテーブルを構築しています。 uib-datepicker-popupからのngmodelの更新を除いて、すべて正常に動作します。私はいくつかのコードを試したが、まだ成功していない。私は指示なしで試してみて、入力を更新しましたが、モデルは更新されません。ここにeditM「テンプレートから「DT」と「DT2」のすべての行のためのモデルとして使用されているように見えたサンプル（ディレクティブとバージョン）uibootsrap double datepicker-popupがngmodelを更新しない

var myApp = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
myApp.controller('shopsCtrl', function($scope, $filter, $http) { 
 
\t \t $scope.myData = [{"idshops":"1001","nome":"Colombo","idfirmas":4,"zona":1,"data_abertura":"2005-07-01","data_fecho":null,"ip":"192.168.181.1","ip2":"192.168.181.2","ip3":null},{"idshops":"1002","nome":"OeirasPq","idfirmas":4,"zona":1,"data_abertura":"2005-07-01","data_fecho":null,"ip":"192.168.105.3","ip2":null,"ip3":null},{"idshops":"1003","nome":"Vasco da Gama","idfirmas":4,"zona":1,"data_abertura":"2010-09-30","data_fecho":null,"ip":"192.168.183.1","ip2":null,"ip3":null},{"idshops":"1004","nome":"Aeroporto de Lisboa ","idfirmas":4,"zona":1,"data_abertura":"2005-07-01","data_fecho":null,"ip":"192.168.184.1","ip2":null,"ip3":null},{"idshops":"1005","nome":"Amoreiras","idfirmas":4,"zona":1,"data_abertura":"2016-09-01","data_fecho":null,"ip":"192.168.185.1","ip2":null,"ip3":null}]; 
 
\t \t angular.forEach($scope.myData, function(values, key) { 
 
\t \t \t values['myid']=key; 
 
\t \t }); 
 
\t \t $scope.myDataM = $filter('filter')($scope.myData, {idfirmas: 4}, true); 
 
\t \t $scope.myDataA = $filter('filter')($scope.myData, {idfirmas: 2}, true); 
 
\t \t $scope.myDataB = $filter('filter')($scope.myData, {idfirmas: 3}, true); 
 
\t \t $scope.myDataI = $filter('filter')($scope.myData, {idfirmas: 1}, true); 
 

 
\t \t $scope.totalItemsM = $scope.myDataM.length; 
 
\t \t $scope.totalItemsA = $scope.myDataA.length; 
 
\t \t $scope.totalItemsB = $scope.myDataB.length; 
 
\t \t $scope.totalItemsI = $scope.myDataI.length; 
 
/*pagination*/ 
 
\t $scope.Mselected = {}; 
 
\t $scope.Aselected = {}; 
 
\t $scope.Bselected = {}; 
 
\t $scope.Iselected = {}; 
 
\t $scope.itemsPerPage = 11; 
 
\t $scope.currentPageM = 1; 
 
\t $scope.setPageM = function (pageNo) { 
 
\t \t $scope.currentPageM = pageNo; 
 
\t }; 
 
\t $scope.currentPageA = 1; 
 
\t $scope.setPageA = function (pageNo) { 
 
\t \t $scope.currentPageA = pageNo; 
 
\t }; 
 
\t $scope.currentPageB = 1; 
 
\t $scope.setPageB = function (pageNo) { 
 
\t \t $scope.currentPageB = pageNo; 
 
\t }; 
 
\t $scope.currentPageI = 1; 
 
\t $scope.setPageI = function (pageNo) { 
 
\t \t $scope.currentPageI = pageNo; 
 
\t }; 
 
/* fim pagination 
 
    inicio template edit/view */ 
 
\t $scope.getTemplateM = function (shops) { 
 
\t \t if (shops.myid === $scope.Mselected.myid) return 'editM'; 
 
\t \t else return 'displayM'; 
 
\t }; 
 

 
\t $scope.editRowM = function (shops) { 
 
\t \t $scope.Mselected = angular.copy(shops); 
 
\t \t $scope.dt = $scope.Mselected.data_abertura===null ? null : new Date($scope.Mselected.data_abertura); 
 
\t \t $scope.dt2 = $scope.Mselected.data_fecho===null ? null : new Date($scope.Mselected.data_fecho); 
 
\t }; 
 
\t $scope.saveRowM = function (idx) { 
 
\t \t var mypost = angular.extend({action: 'gravarow'}, $scope.Mselected); 
 
\t \t \t \t $scope.myDataM[idx] = angular.copy($scope.Mselected); 
 
\t \t \t \t $scope.resetM(); 
 
\t }; 
 
\t $scope.addRowM = function(){ 
 
\t \t $scope.myDataM.push({'myid': $scope.myData.length, 'idshops': null, 'nome': null, 'idfirmas': '1', 'zona': null, 'data_abertura': null, 'data_fecho': null, 'ip': null, 'ip2': null, 'ip3': null}); 
 
\t \t $scope.myData.push({'myid': $scope.myData.length, 'idshops': null, 'nome': null, 'idfirmas': '1', 'zona': null, 'data_abertura': null, 'data_fecho': null, 'ip': null, 'ip2': null, 'ip3': null}); 
 
\t \t $scope.setPageM(Math.round($scope.totalItemsM/$scope.itemsPerPage)); 
 
\t \t $scope.editRowM($scope.myData[$scope.myData.length - 1]); 
 
\t } 
 

 
\t $scope.resetM = function() { 
 
\t \t $scope.Mselected = {}; 
 
\t \t $scope.dt = new Date(); 
 
\t \t $scope.dt2 = new Date(2020, 5, 22); 
 
\t }; 
 
/* fim templates 
 
    inicio calendario */ 
 
\t $scope.dtpopup = {opened: false}; 
 
\t $scope.dtpopupopen = function($event){ 
 
    \t $event.preventDefault(); 
 
    \t $event.stopPropagation(); 
 
\t \t $scope.dtpopup.opened = true; 
 
\t } 
 
\t $scope.dt2popup = {opened: false}; 
 
\t $scope.dt2popupopen = function($event){ 
 
    \t $event.preventDefault(); 
 
    \t $event.stopPropagation(); 
 
\t \t $scope.dt2popup.opened = true; 
 
\t } 
 
\t $scope.resetM(); 
 
\t $scope.dtOptions = { 
 
\t \t showWeeks: true, 
 
\t \t maxDate: $scope.dt2, 
 
\t \t minDate: null, 
 
\t \t startingDay: 1 
 
\t }; 
 
\t $scope.dt2Options = { 
 
\t \t showWeeks: true, 
 
\t \t maxDate: null, 
 
\t \t minDate: $scope.dt, 
 
\t \t startingDay: 1 
 
\t }; 
 
/* \t $scope.$watch('dt', function(e){ 
 
\t \t $scope.Mselected.data_abertura = $filter('date')(e, 'yyyy-MM-dd'); 
 
\t \t $scope.dt2Options.minDate = $filter('date')(e, 'yyyy-MM-dd'); 
 
\t }); 
 
\t $scope.$watch('dt2', function(e){ 
 
\t \t $scope.Mselected.data_fecho = $filter('date')(e, 'yyyy-MM-dd'); 
 
\t \t $scope.dtOptions.maxDate = $filter('date')(e, 'yyyy-MM-dd'); 
 
\t }); 
 
/* fim calendario */ 
 
\t $scope.focus = function(e){ 
 
\t \t e.target.select(); 
 
\t } 
 
// Object.keys(datag).toString() 
 
\t $scope.tabs = [{title:'Mi', disabled: false},{title:'Az', disabled: true},{title:'Bb', disabled: true}, 
 
\t \t {title:'Ing', disabled: true}]; 
 
}); 
 
myApp.directive('csDateToIso', function() { 
 

 
\t  var linkFunction = function (scope, element, attrs, shopsCtrl, filter, http) { 
 

 
\t   shopsCtrl.$parsers.push(function (datepickerValue) { 
 
\t    return moments(datepickerValue).format('YYYY-MM-DD'); 
 
\t   }); 
 

 
\t  }; 
 

 
\t  return { 
 
\t   restrict: 'A', 
 
\t   require: 'ngModel', 
 
\t   link: linkFunction 
 
\t  }; 
 

 
\t });
.full button span { 
 
    background-color: limegreen; 
 
    border-radius: 32px; 
 
    color: black; 
 
    } 
 
    .partially button span { 
 
    background-color: orange; 
 
    border-radius: 32px; 
 
    color: black; 
 
    }
<!doctype html> 
 
<html ng-app="myApp" ng-controller="shopsCtrl"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    <script src="script.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div > 
 
<div ng-bind="dt"></div> 
 
<div ng-bind="dt2"></div> 
 
<div class="btn pull-right" id="ihelp"><span class="glyphicon icon-help"><img src="../images/logo_help.jpeg"/></span></div> 
 
<uib-tabset active="active"> 
 
\t <uib-tab index="0" heading="Mi" disable="tab.disabled"> 
 
\t </br> 
 
\t \t <table class="table table-bordered table-striped"> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="dthead">Id</td> 
 
\t \t \t \t \t <td class="dthead">Nome</td> 
 
\t \t \t \t \t <td class="dthead">Zona</td> 
 
\t \t \t \t \t <td class="dthead">Data Abertura</td> 
 
\t \t \t \t \t <td class="dthead">Data Fecho</td> 
 
\t \t \t \t \t <td class="dthead">IP 1</td> 
 
\t \t \t \t \t <td class="dthead">IP 2</td> 
 
\t \t \t \t \t <td class="dthead">IP 3</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tfoot> 
 
\t \t \t \t <td colspan="9" style="text-align: center;"> 
 
\t \t \t \t \t <ul uib-pagination direction-links="false" boundary-links="true" items-per-page="itemsPerPage" total-items="totalItemsM" ng-model="currentPageM"></ul> 
 
\t \t \t \t </td> 
 
\t \t \t </tfoot> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr ng-repeat="x in myDataM | limitTo : itemsPerPage : (currentPageM - 1) * itemsPerPage" ng-include="getTemplateM(x)"> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td colspan="9"><i class="glyphicon glyphicon-plus-sign btn btn-success btn-lg" ng-click="addRowM()"></i></td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t </uib-tab> 
 
\t <uib-tab index="1" heading="Az" disable="tab.disabled"></uib-tab> 
 
\t <uib-tab index="2" heading="Bb" disable="tab.disabled"></uib-tab> 
 
\t <uib-tab index="3" heading="Ing" disable="tab.disabled"></uib-tab> 
 
</uib-tabset> 
 
</div> 
 
</body> 
 
\t <script type="text/ng-template" id="displayM"> 
 
\t \t <td>{{ x.idshops }}</td> 
 
\t \t <td>{{ x.nome }}</td> 
 
\t \t <td>{{ x.zona }}</td> 
 
\t \t <td>{{ x.data_abertura }}</td> 
 
\t \t <td>{{ x.data_fecho }}</td> 
 
\t \t <td>{{ x.ip }}</td> 
 
\t \t <td>{{ x.ip2 }}</td> 
 
\t \t <td>{{ x.ip3 }}</td> 
 
\t \t <td style="padding-top: 0; padding-bottom: 0;"> 
 
\t \t \t <i class="glyphicon glyphicon-edit btn btn-info btn-lg" ng-click="editRowM(x)"></i> 
 
\t \t </td> 
 
\t </script> 
 
\t <script type="text/ng-template" id="editM"> 
 
\t \t <td style="padding: 4px 0px;"><input type="text" class="form-control" size="3" maxlength="4" ng-model="Mselected.idshops" ng-required="true" /></td> 
 
\t \t <td style="padding: 4px 0px;"><input type="text" class="form-control" size="30" maxlength="50" ng-model="Mselected.nome" ng-required="true" /></td> 
 
\t \t <td style="padding: 4px 0px;"><input type="text" class="form-control" size="1" maxlength="1" ng-model="Mselected.zona" ng-required="true" /></td> 
 
\t \t <td style="padding: 4px 0px;"> 
 
\t \t \t <div class="form-group"><p class="input-group"> 
 
      <input type="text" class="form-control" csDateToIso uib-datepicker-popup='yyyy-MM-dd' ng-model="dt" is-open="dtpopup.opened" datepicker-options="dtOptions" ng-change="dtchange()" close-text="Close" /> 
 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="dtpopupopen($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
 
      </span> 
 
\t \t \t </p></div> 
 
\t \t </td> 
 
\t \t <td style="padding: 4px 0px;"> 
 
\t \t \t <div class="form-group"><p class="input-group"> 
 
\t \t \t \t <input type="text" class="form-control" csDateToIso size="8" maxlength="10" uib-datepicker-popup="yyyy-MM-dd" ng-model="dt2" is-open="dt2popup.opened" datepicker-options="dt2Options" ng-required="true" close-text="Close" /> 
 
\t \t \t \t <span class="input-group-btn"> 
 
\t \t \t \t \t <button type="button" class="btn btn-default" ng-click="dt2popupopen($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
 
\t \t \t \t </span> 
 
\t \t \t </p></div> 
 
\t \t </td> 
 
\t \t <td style="padding: 4px 0px;"><input type="text" class="form-control" size="11" maxlength="15" ng-model="Mselected.ip" ng-required="true" /></td> 
 
\t \t <td style="padding: 4px 0px;"><input type="text" class="form-control" size="11" maxlength="15" ng-model="Mselected.ip2" /></td> 
 
\t \t <td style="padding: 4px 0px;"><input type="text" class="form-control" size="11" maxlength="15" ng-model="Mselected.ip3" /></td> 
 
\t \t <td style="padding-top: 0; padding-bottom: 0;"> 
 
\t \t \t <i class="glyphicon glyphicon-check btn btn-success btn-lg" ng-click="saveRowM($index)"></i> 
 
\t \t \t <i class="glyphicon glyphicon-log-out btn btn-danger btn-lg" ng-click="resetM()"></i> 
 
\t \t </td> 
 
\t </script> 
 
</html>

出典

2017-11-09 Vitor Rodrigues

+0

ブラウザコンソールで多くのデバッグの後に解決しました。 ngchangeでスコープを更新するために新しい日付を格納する "this"オブジェクト。また、ディレクティブとデフォルトを防止しました。興味のある人はここでコードを確認できます "https://plnkr.co/edit/ fE4FF7d1pVavRCCeAVXW "まだいくつか改善がなされていますが、基本はうまく動作します。 –

答えて

0

です。テンプレートでは、$ indexのように行ごとにモデルを一意にするために何かを追加する必要があります（AngularはngRepeatで自由にあなたに与えます）。

出典

2017-11-09 23:09:20

関連する問題

 関連する問題