Question

我有一张ng-repeat的表格：

<table>
  <tr>
    <thead>
      <th>key</th>
      <th>value</th>
    </thead>
  </tr>
  <tbody ng-repeat = "i in data">
  <td>{{i.key}}</td>
  <td>{{i.value}}</td>
 </tbody>
</table>

当用户点击按钮时，table会填充data-ng-init：

<button ng-click="getNewVals()">new values</button>

我使用新的json得到key-value，我的问题是如何使用key上的新值baes重新填充表格？这是有角度的方式吗？

Answer 1

使用这种方式。如果您提供JSON，那就太好了。

<table>
  <tr>
    <thead>
      <th>key</th>
      <th>value</th>
    </thead>
  </tr>
  <tbody>
  <tr ng-repeat = "(key, val) in data">
  <td>{{key}}</td>
  <td>{{val}}</td>
</tr>
 </tbody>
</table>

Answer 2

ng-repeat绑定到您正在迭代的模型。如果更新模型，ng-repeat将重新绘制。在您的示例中，只要$scope.data发生更改，ng-repeat就会自行更新。

Answer 3

请看以下示例：

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <ul>
        <li ng-repeat="x in persons">{{x.name}}, {{x.age}}</li>
    </ul>
    <button ng-click="changeIt()">Change json</button>
<script>
    //1 module declaration
    var app = angular.module('myApp', []);
    //2 controller declaration
    app.controller('myCtrl',function($scope){
        $scope.persons = [
            {name:"Peter", "age": 23},
            {name:"Lina","age":26},
            {name:"Robert", "age":33}
        ];
        $scope.changeIt = function(){
            $scope.persons = [
                {name:"Larry",age: 59},
                {name:"Joseph", age: 63},
                {name:"Clara", age:71}
            ];
        }
    });
</script> 
</body> 
</html>

希望它能解决你的问题。

Answer 4

你写的是ng-reapet而不是ng-repeat

试试这个。

<table>
  <tr>
    <thead>
      <th>key</th>
      <th>value</th>
    </thead>
  </tr>
  <tbody ng-repeat = "i in data">
  <td>{{i.key}}</td>
  <td>{{i.value}}</td>
 </tbody>
</table>

<button ng-click="data.push({'key':1,'value':2})">new values</button>

Angular - 如何使用新值更新表

4 个答案: