javascript - 为什么我的视图在单击时没有在 Angularjs 中更新，尽管我能够获取内容？

Question

<div class="test" ng-controller="Ctrl">
  <div ng-repeat="task in tasks">
   <button ng-click="removeTask(task.id);">remove</button>
      <div class="content">{{taskId}}</div>
  </div>
<div>


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

function Ctrl($scope) {
  $scope.tasks = [{id:1,'name':'test1'}, {id:2,'name':'test2'}, {id:3,'name':'test3'}];

  $scope.removeTask = function(taskId){
    alert("Task Id is "+taskId);
  };
}

我在警报中收到的内容需要放入 div 中，但 div 不会更新，我做错了什么？

jsFiddle 演示

Answer 1

您可以通过不同的方式实现您的目标。这是我的。由于您需要为每个已删除的项目写一个“警报”，因此您需要保存每个项目的状态，以便您决定是否显示警报

<div class="test" ng-controller="Ctrl">
  <div ng-repeat="task in tasks">
   <button ng-click="removeTask(task);">remove</button>
      <div class="content"> <span ng-show="task.status=='deleted'">Task Id is {{task.id}} </span> </div>
  </div>
<div>

http://jsfiddle.net/PSz7t/9/

var app = angular.module('app', []);
function Ctrl($scope) {
    $scope.tasks = [{id:1,'name':'test1',status:'active'}, {id:2,'name':'test2',status:'active'}, {id:3,'name':'test3',status:'active'}];

  $scope.removeTask = function(task){
      task.status='deleted'; 
  };
}

Answer 2

如果你想要任务的 id - task.id。taskId 只是函数参数的名称，它在这个函数之外是未定义的。

<div class="content">{{task.id}}</div>

但我想，最好的做法是将整个对象传递给点击功能：

  $scope.removeTask = function(task){
      alert("Task Id is " + task.id);
  };

http://jsfiddle.net/PSz7t/3/