javascript - 如何在 angularjs 中动态隐藏和显示 HTML 元素？

Question

我有一些任务表，在那个表中每一行都有一个任务。在每一行中都有一个状态，它是一个按钮的 Controller 。每个任务的初始状态将显示为“进行中”，按钮的文本显示为“标记完成”，但是当单击按钮时，它会将任务状态更改为“完成”并将按钮的文本更改为“标记进行中”。如果将来如果我们想更改“完成”任务的状态，那么我们可以通过“标记进行中”按钮更改状态。请参阅 DEMO on Plunker 上的演示

Angularjs

<script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
      $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          $scope.tasks = response.tasks;
        });
        $scope.markInProgress=function(task){
             alert("markInProgress");
             title=task.title;
             description=task.description;
             uri=task.uri;
             var data={title: title, description: description, done: false, uri:uri};

             // For server But here there is no server so I assigne data outside $http.put
             $scope.tasks[$scope.index] = data;

             // For server
             $http.put(uri, data)
             .success(function(){
                 $scope.tasks[$scope.index] = data;
             });
        };
        $scope.markDone=function(task){
            alert("markDone");
            title=task.title;
             description=task.description;
             uri=task.uri;
             var data={title: title, description: description, done: true, uri: uri};

             // For server But here there is no server so I assigne data outside $http.put
             $scope.tasks[$scope.index] = data;

             // For server
             $http.put(uri, data)
             .success(function(){
                 $scope.tasks[$scope.index] = data;
             });
        };
    });
  </script>

Answer 1

有几个错误。

在您的 HTML 中，您必须引用对象的“完成”属性。

<div ng-repeat="task in tasks">
  <span ng-show="task.done" class="label label-success">Done</span>
  <span ng-show="!task.done" class="label label-important">In Progress</span>
 </div>

在您的 Angualr 函数中，$scope.index 是查找索引的错误方法。而是找到索引并在函数的其余部分使用 var index。

var index = $scope.tasks.indexOf(task);
$scope.tasks[index].done = true;