我有一些行的ngTable。 我的ngTable显示在视图中:'configClinicasClinicas.html'没有问题。
我创建了一个新视图,在“addClinica.html”中添加一行。 我的数据行来自我的本地节点服务器。
为了测试,我最初加载了ui-route状态('configuracoes.clinicas.clinicas')以显示该表。
之后,我点击一个按钮加载一个新状态('configuracoes.clinicas.addclinica')来添加一个新行。接下来,我将新数据发布到服务器。到目前为止这么好,直到这里没问题。
问题是,在我将新数据行发布到服务器后,我使用$ state.go再次加载我的表,但刚刚发布的新行没有出现在表中。我可以看到新行来自服务器,但它没有显示在表中。
我新添加的行在表格中显示为没有数据的空白行。
如果我再次点击添加新行,我会收到错误“不允许在转发器中重复”。
我是ngTable的新手。
我在这里想念什么?
//错误:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: row in $data track by row.id, Duplicate key: undefined, Duplicate value: {"clinica":{"id":6,"nome":"sadf","endereco":"sadf","bairro":"sadf","cidade":"sdfsaass","uf":"sdafasd","telefone":"sadfasd","isAtivo":true,"coord":{"id":2,"latitude":-49.4,"longitude":23.2}}}
http://errors.angularjs.org/1.6.1/ngRepeat/dupes?p0=row%20in%20%24data%20tr…%7B%22id%22%3A2%2C%22latitude%22%3A-49.4%2C%22longitude%22%3A23.2%7D%7D%7D
at angular.js:68
at ngRepeatAction (angular.js:30804)
at $watchCollectionAction (angular.js:17677)
at Scope.$digest (angular.js:17814)
at Scope.$apply (angular.js:18080)
at done (angular.js:12210)
at completeRequest (angular.js:12436)
at XMLHttpRequest.requestLoaded (angular.js:12364)
// configClinicasClinicas.html'
<p>
<a class="btn btn-sm btn-success" ui-sref="configuracoes.clinicas.addclinica">Add Clinic
</a>
</p>
<table ng-table="tableParams" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="row in $data track by row.id">
<td data-title="'Nome'" filter="{name: 'text'}" sortable="'nome'">{{row.nome}}</td>
<td align="center" valign="center" data-title="'Endereço'"> {{row.endereco}}</td>
<td align="center" valign="center" data-title="'Bairro'" > {{row.bairro}}</td>
<td align="center" valign="center" data-title="'Cidade'" > {{row.cidade}}</td>
<td align="center" valign="center" data-title="'Estado'" > {{row.uf}}</td>
<td align="center" valign="center" data-title="'Telefone'" > {{row.telefone}}</td>
<td align="center" valign="center" data-title="'Ativo'"> <span ng-class="row.isAtivo ? 'label label-info' : 'label label-danger' "> {{row.isAtivo ? "Ativo":"Inativo"}} </span></td>
</tr>
</table>
</table>
// addClinica.html
<div class="col-md-9">
<form class="form-horizontal">
<fieldset>
<legend>
Dados da clínica
</legend>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="registro">
ID
</label>
<div class="col-sm-5 col-lg-4">
<input id="registro" name="clinica.id" ng-model="clinica.id" type="number" class="form-control inline">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="nome" title="Nome">
Nome *
</label>
<div class="col-sm-5 col-lg-4">
<input name="clinica.nome" id="nome" ng-model="clinica.nome" class="form-control " type="text" required="required" maxlength="60">
</div>
</div>
</fieldset>
...
....
<div class="col-xs-12 no-padding pull-right">
<div class="clearfix form-actions">
<div class="col-md-offset-3 col-md-9">
<a class="btn btn-primary" ng-click="saveClinica(clinica)">
<i class="fa fa-check bigger-110"></i>
Save
</a>
<a class="btn btn-success" ui-sref="smenupacientes.clinicas.clinicas()">
<i class="fa fa-close bigger-110"></i>
Cancel
</a>
</div>
</div>
</div>
</form>
</div>
// JS
angular.module("clinang", ["ngTable", "ui.router","ui.bootstrap"]);
angular.module("clinang").config(function($stateProvider, $urlMatcherFactoryProvider,$urlRouterProvider,$locationProvider) {
//$locationProvider.html5Mode(true);
$urlMatcherFactoryProvider.caseInsensitive(true);
// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/pacientes');
// the unknown
$urlRouterProvider.otherwise('/404');
$stateProvider
.... other states
.state('configuracoes.clinicas.addclinica', {
url: '/addclicnica',
views:{
'configclinicasaddclicnica@configuracoes.clinicas':{
templateUrl: '/views/addClinica.html',
controller: 'configClinicaClinicaAddClinicaCtrl'
}
}
})
.state('configuracoes.clinicas.clinicas', {
url: '/configclinicasclinicas',
views:{
'configclinicasclinicas@configuracoes.clinicas':{
templateUrl: '/views/configClinicasClinicas.html',
controller: 'configClinicaClinicaCtrl'
}
}
})
});
//Controllers
ngular.module("clinang").controller('configClinicaClinicaAddClinicaCtrl',['$scope','$http', '$state','NgTableParams', function($scope,$http, $state,NgTableParams) {
$scope.clinica={};
$scope.saveClinica=function(clinica){
var coord={id:2, latitude:-49.4, longitude:23.2};
clinica.coord=coord;
$http.post('/clinicas',{clinica}).then(function(response){
delete $scope.clinica;
$state.go('configuracoes.clinicas.clinicas');
}, function(error){
console.log(error)
})
}
}]);
angular.module("clinang").controller('configClinicaClinicaCtrl',['$scope','$http', '$state','NgTableParams', function($scope,$http, $state,NgTableParams) {
$scope.tableParams = new NgTableParams({}, {
getData: function(params) {
return $http.get('/clinicas',{params:{where:params}}).then(function(response){
params.total(response.data.length); // recal. page nav controls
console.log(JSON.stringify(response.data));
return response.data;
}, function(error){
console.log(error)
})
}})
}]);