当ng-repeat更新时，HTML表没有更新

html table not getting updated when ng-repeat is updated

本文关键字：更新 HTML ng-repeat      更新时间：2023-09-26

我尝试通过添加值的形式来更新表，范围变量得到更新，但表仍然未更新。我的表

<tbody> 
    <tr ng-repeat="ct in city">
        <td>
            <center>[ {{ct.location.latitude}} , {{ct.location.longitude}} ]</center>
        </td>
        <td>
            {{ct.name}} 
        </td>

my function to update list 

window.siteadd = function(){
    var citlat = document.getElementById("citylat").value;
    var citlan = document.getElementById("citylon").value;
    var citname = document.getElementById("cityname").value;
    var citstat = document.getElementById("citynostation").value;
    var citytemp = {
        location:{
            latitude: citlat,
            longitude: citlan
        },
        name: citname,
    }
    console.log("temp", citytemp);
    $scope.city.push(citytemp);
    console.log("tempadded", $scope.city);
}

表没有更新，因为函数siteadd没有在angular的上下文中运行，因此$digest循环没有由它运行以更新视图中的所有绑定。

为了使它成为可能，你必须在你的函数中显式地调用$digest循环，或者只是将函数包装在$scope.$apply中。

对于你的代码:

window.siteadd = function(){
    var citlat = document.getElementById("citylat").value;
    var citlan = document.getElementById("citylon").value;
    var citname = document.getElementById("cityname").value;
    var citstat = document.getElementById("citynostation").value;
    var citytemp = {
        location:{
            latitude: citlat,
            longitude: citlan
        },
        name: citname,
    }
    console.log("temp", citytemp);
    $scope.city.push(citytemp);
    console.log("tempadded", $scope.city);
    $scope.$digest(); //just add this line and it will work.
}

/*****供您参考*****/

为了更好地理解$watch, $digest and $apply，请参考链接"http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/"

var app=angular.module("app",[])
app.controller("itemController",function($scope){
  
 $scope.citytemp = {
        location:{
                    latitude: null,
                    longitude: null
                  },
        name: null
   }
 $scope.city=[];
   $scope.city.push($scope.citytemp);
  
});
<html>
<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>  
</head>
<body ng-app="app">
  <div ng-controller="itemController">
   City Name: <input type='text' ng-model='citytemp.name'><br>
   Latitude: <input type='text' ng-model='citytemp.location.latitude'><br>
   Longitude: <input type='text' ng-model='citytemp.location.longitude'><br>
   
<table>
<tbody> 
    <tr ng-repeat="ct in city">
        <td>
          City Name: {{ct.name}} 
          <br> Location : [ {{ct.location.latitude}} ,{{ct.location.longitude}} ]           
        </td> 
        <td>
            
        </td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

相关文章：