以标记值为条件，使用AngularJS生成和更新表

Generating and updating table with AngularJS conditioned on tag value

本文关键字：AngularJS 更新 使用 条件      更新时间：2023-09-26

我是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>

此处的"键"为quote.value1。

这一切都取决于从服务器返回的数据的结构。代替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重复这样的值：

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

只需将其附加到数组中，视图就会更新。我可以向你展示我如何在不使用websocket的情况下做类似的事情。

    $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.
       });
    }
相关文章：