html таблица не обновляется при обновлении ng-repeat

Question

html таблица не обновляется при обновлении ng-repeat

0

Я пытаюсь обновить таблицу, добавив значения в форму, которую обновляет переменная области, но таблица остается не обновленной. Моя таблица

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

моя функция для обновления списка

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);
}

Aswin Raghavan 17 июль 2015, в 14:39

Источник

Теги:

javascript

jquery

html

angularjs

2 ответа

0

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>

Panchanand Mahto 17 июль 2015, в 11:00

Ещё вопросы

sahil gupta · Accepted Answer · 2015-07-17T11-02-00.000Z

Таблица не обновляется, потому что функция siteadd не работает в контексте углового, и поэтому цикл $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/ "