我有一些表用于某项任务，在该表中每行都有一个任务。 在每一行中都有一个按钮控制器的状态。每个任务的初始状态将显示为正在进行，按钮的文本显示为标记完成，但是当单击按钮时，它会将任务的状态更改为< strong>完成并将按钮文本更改为标记正在进行。如果将来如果我们想要改变＆＃34; Done＆＃34;的状态。任务然后我们可以通过Button＆＃34; Mark In Progress＆＃34;来改变状态。
在这个现场演示中，
的index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>
<span data-bind="visible: done" class="label label-success">Done</span>
<span data-bind="visible: !done()" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
<td> <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a></td>
<td>
<span data-bind="visible: done">
<button data-bind="click: $parent.markInProgress" class="btn">Mark In Progress</button>
</span>
</td>
<td>
<span data-bind="visible: !done()">
<button data-bind="click: $parent.markDone" class="btn">Mark Done</button>
</span>
</td>
</tr>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div>
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="selectedTask.title" />
<input type="text" ng-model="selectedTask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addDialogLabel">Add Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;"><br />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<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) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask=function(task) {
$scope.selectedTask = task;
};
$scope.removeRow = function (task) {
$scope.tasks.splice(task, 1);
};
$scope.addNewTask=function(){
//$scope.tasks.push({title :$scope.task1,description: $scope.description1});
$scope.tasks.push({title : $scope.task1, description : $scope.description1});
$scope.task1='';
$scope.description1='';
// $scope.tasks.push('dhsh');
};
});
/*
app.controller('addNewTaskCtrl', ['$scope', function($scope){
$scope.addNewTask=function(){
var task;
}
}]);*/
</script>
</body>
</html>
答案 0 :(得分：4)
尝试使用ng-show和ng-hide指令。
这是Plunkr。
<强> E.g。
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>
<span ng-show="done" class="label label-success">Done</span>
<span ng-hide="done" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
</td>
<td>
<a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
</td>
<td ng-show="done">
<span>
<button ng-click="done = !done" class="btn">Mark In Progress</button>
</span>
</td>
<td ng-hide="done">
<span>
<button ng-click="done = !done" class="btn">Mark Done</button>
</span>
</td>
</tr>
</tbody>
</table>
希望它有所帮助。
答案 1 :(得分：3)
我不太确定我是否理解你想要做什么，但我认为你可能正在寻找this。 ngHide 允许您根据您设置“ ngHide ”值的内容隐藏元素。
例如：
<!-- when $scope.buttonStatus is set to true -->
<div ng-hide="$scope.buttonStatus" class="ng-hide"></div>
<!-- The element would be hidden -->
<!-- when $scope.buttonStatus's value is changed! -->
<div ng-hide="$scope.buttonStatus"></div>
<!-- The element would now be visible -->
如果您需要进一步澄清，请告诉我们！我知道这很简短：）