我有一些任务的表,在该表中每一行都有一个任务。每一行都有状态,可以通过一个按钮进行控制。每个任务的初始状态将显示为“正在进行”,按钮的文本将显示为“标记为完成”,但是当单击该按钮时,它将将该任务的状态更改为“完成”,并将按钮的文本更改为“标记为进行中”。如果将来如果我们想更改“完成”任务的状态,那么我们可以通过“标记正在进行”按钮更改状态。请参阅 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>
最佳答案
有几个错误。
在 HTML 中,您必须引用对象的“done”属性。
<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;
关于javascript - 如何在AngularJS中动态隐藏和显示HTML元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31317847/