Angularjs ngTable未显示刚添加的行

时间:2017-04-12 19:22:59

标签: angularjs ngtable

我有一些行的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&nbsp;*
            </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)
        })
      }})
}]);

0 个答案:

没有答案