我正在构建一个简单的表来编辑和添加信息。除了从uib-datepicker-popup更新ngmodel之外，一切正常。我尝试了几个代码，但仍然没有成功。我甚至尝试了没有指令，并更新了输入，但模型没有更新。这是样本（带指令的版本）
var myApp = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
myApp.controller('shopsCtrl', function($scope, $filter, $http) {
$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}];
angular.forEach($scope.myData, function(values, key) {
values['myid']=key;
});
$scope.myDataM = $filter('filter')($scope.myData, {idfirmas: 4}, true);
$scope.myDataA = $filter('filter')($scope.myData, {idfirmas: 2}, true);
$scope.myDataB = $filter('filter')($scope.myData, {idfirmas: 3}, true);
$scope.myDataI = $filter('filter')($scope.myData, {idfirmas: 1}, true);
$scope.totalItemsM = $scope.myDataM.length;
$scope.totalItemsA = $scope.myDataA.length;
$scope.totalItemsB = $scope.myDataB.length;
$scope.totalItemsI = $scope.myDataI.length;
/*pagination*/
$scope.Mselected = {};
$scope.Aselected = {};
$scope.Bselected = {};
$scope.Iselected = {};
$scope.itemsPerPage = 11;
$scope.currentPageM = 1;
$scope.setPageM = function (pageNo) {
$scope.currentPageM = pageNo;
};
$scope.currentPageA = 1;
$scope.setPageA = function (pageNo) {
$scope.currentPageA = pageNo;
};
$scope.currentPageB = 1;
$scope.setPageB = function (pageNo) {
$scope.currentPageB = pageNo;
};
$scope.currentPageI = 1;
$scope.setPageI = function (pageNo) {
$scope.currentPageI = pageNo;
};
/* fim pagination
inicio template edit/view */
$scope.getTemplateM = function (shops) {
if (shops.myid === $scope.Mselected.myid) return 'editM';
else return 'displayM';
};
$scope.editRowM = function (shops) {
$scope.Mselected = angular.copy(shops);
$scope.dt = $scope.Mselected.data_abertura===null ? null : new Date($scope.Mselected.data_abertura);
$scope.dt2 = $scope.Mselected.data_fecho===null ? null : new Date($scope.Mselected.data_fecho);
};
$scope.saveRowM = function (idx) {
var mypost = angular.extend({action: 'gravarow'}, $scope.Mselected);
$scope.myDataM[idx] = angular.copy($scope.Mselected);
$scope.resetM();
};
$scope.addRowM = function(){
$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});
$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});
$scope.setPageM(Math.round($scope.totalItemsM / $scope.itemsPerPage));
$scope.editRowM($scope.myData[$scope.myData.length - 1]);
}
$scope.resetM = function () {
$scope.Mselected = {};
$scope.dt = new Date();
$scope.dt2 = new Date(2020, 5, 22);
};
/* fim templates
inicio calendario */
$scope.dtpopup = {opened: false};
$scope.dtpopupopen = function($event){
$event.preventDefault();
$event.stopPropagation();
$scope.dtpopup.opened = true;
}
$scope.dt2popup = {opened: false};
$scope.dt2popupopen = function($event){
$event.preventDefault();
$event.stopPropagation();
$scope.dt2popup.opened = true;
}
$scope.resetM();
$scope.dtOptions = {
showWeeks: true,
maxDate: $scope.dt2,
minDate: null,
startingDay: 1
};
$scope.dt2Options = {
showWeeks: true,
maxDate: null,
minDate: $scope.dt,
startingDay: 1
};
/* $scope.$watch('dt', function(e){
$scope.Mselected.data_abertura = $filter('date')(e, 'yyyy-MM-dd');
$scope.dt2Options.minDate = $filter('date')(e, 'yyyy-MM-dd');
});
$scope.$watch('dt2', function(e){
$scope.Mselected.data_fecho = $filter('date')(e, 'yyyy-MM-dd');
$scope.dtOptions.maxDate = $filter('date')(e, 'yyyy-MM-dd');
});
/* fim calendario */
$scope.focus = function(e){
e.target.select();
}
// Object.keys(datag).toString()
$scope.tabs = [{title:'Mi', disabled: false},{title:'Az', disabled: true},{title:'Bb', disabled: true},
{title:'Ing', disabled: true}];
});
myApp.directive('csDateToIso', function () {
var linkFunction = function (scope, element, attrs, shopsCtrl, filter, http) {
shopsCtrl.$parsers.push(function (datepickerValue) {
return moments(datepickerValue).format('YYYY-MM-DD');
});
};
return {
restrict: 'A',
require: 'ngModel',
link: linkFunction
};
}); .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">
<uib-tab index="0" heading="Mi" disable="tab.disabled">
</br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td class="dthead">Id</td>
<td class="dthead">Nome</td>
<td class="dthead">Zona</td>
<td class="dthead">Data Abertura</td>
<td class="dthead">Data Fecho</td>
<td class="dthead">IP 1</td>
<td class="dthead">IP 2</td>
<td class="dthead">IP 3</td>
</tr>
</thead>
<tfoot>
<td colspan="9" style="text-align: center;">
<ul uib-pagination direction-links="false" boundary-links="true" items-per-page="itemsPerPage" total-items="totalItemsM" ng-model="currentPageM"></ul>
</td>
</tfoot>
<tbody>
<tr ng-repeat="x in myDataM | limitTo : itemsPerPage : (currentPageM - 1) * itemsPerPage" ng-include="getTemplateM(x)">
</tr>
<tr>
<td colspan="9"><i class="glyphicon glyphicon-plus-sign btn btn-success btn-lg" ng-click="addRowM()"></i></td>
</tr>
</tbody>
</table>
</uib-tab>
<uib-tab index="1" heading="Az" disable="tab.disabled"></uib-tab>
<uib-tab index="2" heading="Bb" disable="tab.disabled"></uib-tab>
<uib-tab index="3" heading="Ing" disable="tab.disabled"></uib-tab>
</uib-tabset>
</div>
</body>
<script type="text/ng-template" id="displayM">
<td>{{ x.idshops }}</td>
<td>{{ x.nome }}</td>
<td>{{ x.zona }}</td>
<td>{{ x.data_abertura }}</td>
<td>{{ x.data_fecho }}</td>
<td>{{ x.ip }}</td>
<td>{{ x.ip2 }}</td>
<td>{{ x.ip3 }}</td>
<td style="padding-top: 0; padding-bottom: 0;">
<i class="glyphicon glyphicon-edit btn btn-info btn-lg" ng-click="editRowM(x)"></i>
</td>
</script>
<script type="text/ng-template" id="editM">
<td style="padding: 4px 0px;"><input type="text" class="form-control" size="3" maxlength="4" ng-model="Mselected.idshops" ng-required="true" /></td>
<td style="padding: 4px 0px;"><input type="text" class="form-control" size="30" maxlength="50" ng-model="Mselected.nome" ng-required="true" /></td>
<td style="padding: 4px 0px;"><input type="text" class="form-control" size="1" maxlength="1" ng-model="Mselected.zona" ng-required="true" /></td>
<td style="padding: 4px 0px;">
<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>
</p></div>
</td>
<td style="padding: 4px 0px;">
<div class="form-group"><p class="input-group">
<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" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dt2popupopen($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p></div>
</td>
<td style="padding: 4px 0px;"><input type="text" class="form-control" size="11" maxlength="15" ng-model="Mselected.ip" ng-required="true" /></td>
<td style="padding: 4px 0px;"><input type="text" class="form-control" size="11" maxlength="15" ng-model="Mselected.ip2" /></td>
<td style="padding: 4px 0px;"><input type="text" class="form-control" size="11" maxlength="15" ng-model="Mselected.ip3" /></td>
<td style="padding-top: 0; padding-bottom: 0;">
<i class="glyphicon glyphicon-check btn btn-success btn-lg" ng-click="saveRowM($index)"></i>
<i class="glyphicon glyphicon-log-out btn btn-danger btn-lg" ng-click="resetM()"></i>
</td>
</script>
</html>
答案 0 :(得分：0)
看起来'dt'和'editM'模板中的'dt2'被用作所有行的模型。在您的模板中，您可能需要添加一些内容以使每行的模型都像$ index一样（Angular在ngRepeat上为您提供免费的。