Question

使用ng-repeat时有一个奇怪的问题。仅作为附加信息，我也使用ui-router。

我使用简单的标记进行了测试，该标记查询本地节点服务器中的某些数据并使用ng-repeat进行显示。

要进行测试，我单击一个按钮向服务器添加新行，然后再次查询服务器以更新新行。

问题是服务器正确返回包含新行的所有数据，但是ng-repeat没有显示刚刚添加的行。

以下是问题的更多细节。

首先，当页面加载时我有

RowId
1
2

点击“添加并刷新行”按钮后，我希望屏幕上显示：

RowId
1
2
5

但我仍然只有：

RowId
1
2

在控制台中，我在添加一行后检查了服务器的返回数据，返回的数据是：

{id:1,name:'John Doe'},
{id:2,name:'Mary Doe'}
{id:5,name:'teste'}

其中item id = 5是刚添加的行，buit它不会出现ng-repeat。

我做错了什么？

//标记

<div  ng-controller="configClinicaClinicaCtrl"> 
  <a class="btn btn-sm btn-success" ng-click="saveClinica()">Add and Refresh Row</a>
  <div>RowId</div>
  <div ng-repeat="row in dados track by $index">
      {{row.id}}
  </div>
</div>

//在node.js上使用server.js脚本的本地服务器

var clinicas=[
{id:1,name:'John Doe'},
{id:2,name:'Mary Doe'}
];

//get clinicas
app.get('/clinicas', function(req, res) {
  res.json(clinicas);
});

//insert clinica
app.post('/clinicas', function(req, res) {
  clinicas.push(req.body);
  res.json(true);
});

//控制器

angular.module("clinang").controller('configClinicaClinicaCtrl',['$scope','$http', '$state', function($scope,$http, $state) {
      $scope.dados={};
      $scope.clinica={};
      var refreshData=function(){
        $http.get('/clinicas').then(function(response){
            $scope.dados=response.data;
        }, function(error){
          console.log(error)
        });
      }
      refreshData();


     $scope.saveClinica=function(){
        $scope.clinica.id=5; 
        $scope.clinica.nome='teste';
        var clinica=$scope.clinica;
        $http.post('/clinicas',{clinica}).then(function(response){
            refreshData();
        }, function(error){
          console.log(error)
        })
      }
}]);

Answer 1

每当你在AngularJS之外进行某种形式的操作时，例如进行API调用，你需要让AngularJS知道自己更新。试试这个，

 var refreshData=function(){
        $http.get('/clinicas').then(function(response){
            $scope.dados=response.data;
             $scope.$apply();
        }, function(error){
          console.log(error)
        });
  }

Angular JS ng-repeat没有正确显示数据

1 个答案: