Question

我使用AngularJS创建了一个简单的待办事项应用程序。

每当更新单个任务时，它都会显示updated date，但我ng-repeat列表中的所有项目都会根据该日期进行更新。

我的API将返回与此类似的数组

[{
    'id' : 1,
    'title' : 'Eat',
    'isCompleted' : false,
    'createdAt' : new Date(),
    'updatedAt' : new Date()
}, {
    'id' : 2,
    'title' : 'Sleep',
    'isCompleted' : false,
    'createdAt' : new Date(),
    'updatedAt' : new Date()
}, {
    'id' : 3,
    'title' : 'Code',
    'isCompleted' : false,
    'createdAt' : new Date(),
    'updatedAt' : new Date()
}]

我在index.html

中有这个

<ul class="task-list">
    <li ng-repeat="task in tasks | orderBy : 'createdAt' : true">
    <div class="task-container" ng-hide="task.isEditable">
        <div class="checkbox task-detail-container">
            <div class="task-checkbox">
                <input type="checkbox" value="{{ task.title }}" />
            </div>
            <div class="task-detail" ng-dblclick="isUpdatingTask(task)">
                <div class="task-title">
                    <span>
                        {{ task.title }}
                    </span>
                </div>
                <div class="task-updated-at">
                    {{ updatedMsg }}
                </div>
            </div>
        </div>
        <div class="task-option">
            <i class="icon icon-trash-bin trash-bin" ng-click="deleteTask(task)"></i>
        </div>
    </div>
    </li>
</ul>

所以在controller.js，我有

$scope.updateTask = function (task) {
    taskFactory.update({
        'id' : task._id
    }, {
        'title' : task.title,
        'isCompleted' : task.isCompleted
    })
};

$scope.$watch('updatedTask', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.updatedMsg = 'Modified ' + newVal.updatedAt;
    }
});

Answer 1

我认为你需要一个列表项控制器。这样做是为列表中单击的项创建控制器的实例。现在你有一个控制器用于你的列表，当你更新一些东西时，控制器应该知道哪个项目要更新？控制器不会更新所有内容。

app.controller('listItemCtrl',listItemCtrl);

listItemCtrl.$inject =['$scope'];


function listItemCtrl($scope){
  $scope.showMsg = false;
  $scope.updatedMsg ="";

  $scope.updateTask = function (task) {
     task.updatedAt = new Date();
      $scope.showMsg = true;

  var index =  arrayObjectIndexOf($scope.tasks,task.id,'id');
  if(index!==-1){
    $scope.tasks.splice(index,1,task);
     $scope.updatedMsg = 'Modified at: '+task.updatedAt;

  }

  };


/*
$scope.$watch('updatedTask', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.updatedMsg = 'Modified';
    }
});*/


}

function arrayObjectIndexOf(myArray, searchTerm, property) {
                for(var i = 0, len = myArray.length; i < len; i++) {
                    if (myArray[i][property] === searchTerm) return i;
                }
                    return -1;
            }

如果您双击它，请查看我的plunker https://github.com/scott-laursen/grunt-scriptlinker它将继续更新＆＃34; updatedAt＆＃34;属性。

如何更新单个项目而不是更新ng-repeat中的所有项目

1 个答案: