Javascript 如何在angularjs中动态隐藏和显示HTML元素?
我有一张表格,表格中的每一行都有一个任务。在每一行中都有一个由一个按钮控制的状态。每个任务的初始状态将显示为“进行中”,按钮文本显示为“标记完成”,但当单击按钮时,它将更改任务状态为“完成”,按钮文本显示为“标记进行中”。如果将来我们想更改“完成”任务的状态,那么我们可以通过“标记进行中”按钮更改状态。请看上的演示 AngularjsJavascript 如何在angularjs中动态隐藏和显示HTML元素?,javascript,angularjs,Javascript,Angularjs,我有一张表格,表格中的每一行都有一个任务。在每一行中都有一个由一个按钮控制的状态。每个任务的初始状态将显示为“进行中”,按钮文本显示为“标记完成”,但当单击按钮时,它将更改任务状态为“完成”,按钮文本显示为“标记进行中”。如果将来我们想更改“完成”任务的状态,那么我们可以通过“标记进行中”按钮更改状态。请看上的演示 Angularjs <script> var app = angular.module('myApp', []); app.controller('tas
<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>
var-app=angular.module('myApp',[]);
app.controller('tasksCtrl',函数($scope,$http){
$http.get(“data.json”)
//$http.get(“/todo/api/v1.0/tasks”)
.成功(功能(响应){
$scope.tasks=response.tasks;
});
$scope.markInProgress=函数(任务){
警报(“markInProgress”);
title=task.title;
description=task.description;
uri=task.uri;
var data={title:title,description:description,done:false,uri:uri};
//对于服务器,但这里没有服务器,所以我将数据分配到$http.put之外
$scope.tasks[$scope.index]=数据;
//对于服务器
$http.put(uri,数据)
.success(函数(){
$scope.tasks[$scope.index]=数据;
});
};
$scope.markDone=函数(任务){
警惕(“markDone”);
title=task.title;
description=task.description;
uri=task.uri;
var data={title:title,description:description,done:true,uri:uri};
//对于服务器,但这里没有服务器,所以我将数据分配到$http.put之外
$scope.tasks[$scope.index]=数据;
//对于服务器
$http.put(uri,数据)
.success(函数(){
$scope.tasks[$scope.index]=数据;
});
};
});
有几种方法,我会使用ng show
来实现这一点
您必须确保通过角度控制器正确设置“show”变量的值
HTML:
如果您想隐藏,当然也可以采用相同的方法:
//your controller code
(.....).success(function(){
$scope.myValue = false;
})
我希望这对您有所帮助有几个错误 在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>
您可以使用ng if=“data.done==false”只要$scope.data.done为false,就会显示元素--->如果您将其标记为完成,则可以使用ng click=“data.done=true”现在您将其标记为“完成”,并且它正在隐藏,但是您的数据对象需要是$scope.data而不是varop。JS中有几个错误,无法正确分配myValue。因此,尽管这个例子是使用ngShow的正确方法,但在这种情况下,这是不够的。他看起来知道自己在做什么,所以我认为这个答案足以让他理解如何动态地改变角度中的div…通过将按钮调用改为
whateverMethod(任务,$index),你也可以在函数调用中使用它
并更改方法,使其具有索引的附加参数。但我认为这会调用错误的索引,例如,如果列表具有排序功能,则会调用错误的索引-因为$index是显示的位置,而不是数组中的位置。为True,但显示器上没有排序或筛选,因此在本用例中可以。不过,您的版本是经得起未来考验的,所以如果显示器可能会有更改,那就更好了。@stevenw00谢谢您的回复我根据您的要求进行了修改,我测试了我的本地机器是否正常工作,但我必须重新加载浏览器。请告诉我如何在不重新加载浏览器的情况下进行更改…抱歉,回答中出现了错误,已修复<代码>风险值索引应该是$scope.tasks
而不是$scope.task
。
//your controller code
(.....).success(function(){
$scope.myValue = false;
})
<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>
var index = $scope.tasks.indexOf(task);
$scope.tasks[index].done = true;