如何更新 Angular Array 中的现有项目（已在外部更改）？

Question

我是 Angular 的新手，正在努力更新我的 Angular 数组中已在外部更改的现有项目（不是通过 Angular 驱动的 UI）。

这是用例...我的网页是通过服务器端调用填充的，我正在将数组加载到 Angular 中并显示在列表中。

现在，如果服务器上的数据发生变化并且在表中插入了新记录，我的页面的 JavaScript 会收到通知，并通过“推送”成功地将新记录插入到 Angular 数组中（参考Programmatically inserting array values in Angular JS）。

但是，当现有记录发生更改时（在服务器端/不是通过 Angular 驱动的 UI），我的页面也会收到通知。我对如何更新 Angular 数组中的正确记录一无所知？ Angular 文档中是否有我遗漏的查询/更新方法？

这是我当前的代码的样子...

    //The HTML UI updates to reflect the new data inserts.
    <div ng-repeat="item in items">        
        <p class="priority">{{item.priority_summary}}</p>
        <p class="type">{{item.type}}</p>
    </div>

这是脚本...

    var app = angular.module('DemoApp', []);

    <!-- Define controller -->
    var contrl = app.controller("MainController", function ($scope) {

    $scope.items = [{
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }];

//The insert works fine. The question is how do I do an update if the notification is for an update, and not for insert.

    $scope.addItem = function(item)
    {
     alert("addItem called");
     $scope.items.push(item);
     $scope.item = {};
    }

      $scope.subscribe = function(){
        //Code for connecting to the endpoint...
        alert("event received"); //We receive this alert, so event is received correctly.

        $scope.items.push({
          status: 'New',
          priority_summary: 'H'
        });
        $scope.$apply();

        }

      //calling subscribe on controller initialization...
      $scope.subscribe();

任何强调这一点的建议或示例都会很棒。谢谢！

Answer 1

我假设您可以检索要更新的相应数据的索引。 所以，你可以试试。

dataList.splice(index, 1);
dataList.splice(index, 0, newItem);

Answer 2

$scope.setActive = function(user) {
  User.get({ id: user._id }, function(user){
      user.active = true;
      user.$update(function(user){
        angular.forEach($scope.users, function(u, i) {
          if (u._id === user._id ) {
            $scope.users[i] = user;
          }
        });
      });
    });
};

Answer 3

Angular 视图会在其模型更改时自动更新，因此无需做额外的事情，只需在控制器中更新您的模型即可-

$scope.data = ajaxdata // data you received from server

在你看来

<ul>
  <li ng-repeat="item in data">{{item}}</li>
</ul>

为了更新您的数据，您应该有一些唯一的键值对（在这种情况下为 u_id），如以下代码示例

$scope.items = [{
    "status": "New",
    "priority_summary": "High",
    "u_id" : 1
}, {
    "status": "New",
    "priority_summary": "High",
    "u_id" : 2
}, {
    "status": "New",
    "priority_summary": "High",
    "u_id" : 3
}, {
    "status": "New",
    "priority_summary": "High",
    "u_id" : 4
}];