Angular - 如何使用新值更新表答案

【问题标题】：Angular - How to update table with new valuesAngular - 如何使用新值更新表
【发布时间】：2016-04-14 11:41:30
【问题描述】：

我有一张桌子，上面有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 上的新值重新填充表格？有角度的方法吗？

【问题讨论】：

请显示你的 javascript 并且你打错了你写的 ng-reapet 而不是 ng-repeat。
是的，这只是一个错字，我的 js 的哪一部分？
超过 1000 行，我正在添加 http 调用和数据。
顺便说一句，您不应该在 tbody 上使用 ng-repeat，而是在包装 td 的 tr 标签上使用 ng-repeat。

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

ng-repeat 绑定到您正在迭代的模型。如果您更新模型，ng-repeat 将重新绘制。在您的示例中，每当 $scope.data 更改时，ng-repeat 都会自行更新。

【讨论】：

尝试发布结果。

【解决方案2】：

以这种方式使用。最好提供 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>

【讨论】：

【解决方案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>

希望它能解决你的问题。

【讨论】：

【解决方案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>

【讨论】：

你写的是 ng-reapet 而不是 ng-repeat
getNewVals() 函数中有什么。 ?