使用 AngularJS 根据标签值生成和更新表

Question

我是 AngularJS 的新手，无法找到这种情况的答案。

基本上，我正在尝试生成一个包含 n 个 tbody 的表（实际上是行，但使用 tbody，因为中继器最适合使用 angularjs 1.0.7 的 tbody）。

每一行都是根据我拥有的项目数生成的。

最初当页面加载时，没有行/tbody。我将通过 websocket 连接到后端并推送数据。对于每次推送，如果不存在具有相同键的行/tbody，我想添加一个行/tbody，键来自后端。如果密钥确实存在，我希望更新现有的表行/tbody。

为了更具体，这里是我正在使用的一些代码：

            <tbody ng-repeat="quote in model.messages.message">             
                <tr>                                                                            
                    <td bgcolor="#FFFFFF" valign="bottom" colspan="5"><font size="2">{{quote.value1}}</font></td>
                </tr>
                <tr>
                    <td bgcolor="#FFFFFF" align="right"><font size="2">{{quote.value2}}</font></td>
                    <td bgcolor="#FFFFFF" align="right"><font size="2">{{quote.value3}}</font></td>
                </tr>                               
            </tbody></table>

这里的“key”是quote.value1。

Answer 1

这一切都取决于从服务器返回的数据结构。而不是 quote.value1 等为什么不创建一个值数组，所以你的 JSON 看起来像这样：

假设 modal.messages =

   [{
      "id":1, 
      "values":
          [{"vid":1, "m":"This is a message value"},
            {"vid":2, "m":"THis is a second message"}]}, 
    {"id":2, "values":[...]}, ...]

然后每条消息都有一个值数组。

因此，您可以对这样的值使用 ng-repeat：

     <tbody ng-repeat="quote in model.messages">             
            <tr ng-repeat ="message in quote.values">
               <td >{{message.m}}</td>
            </tr>
     </tbody>

现在可以将检索到的值添加到数据的适当区域，并且视图将正确更新。

在您的控制器中，您将新数据推送到数组或更新现有值。假设您收到这样的数据：

     data = {"vid":3, "m": "Another great message from the server"};

您在控制器中的工作是确定这是一条新消息还是对现有消息的更新。一个新的很容易：

     your_array.push(data);

将简单地将其附加到数组中并更新视图。我可以向您展示我如何在不使用 websockets 的情况下做类似的事情。

    $scope.getUpdateData = function(quote){
      $http.post('YOUR_SERVER_URL')
        .success(function (data) {
         quote.values.push(data); //if it is new 
         //check if the id exist and simply replace otherwise.
       });
    }