gpt4 book ai didi

angularjs - 如何在 Angularjs 中显示和隐藏带有复选框状态的元素

转载 作者:行者123 更新时间:2023-12-03 08:06:29 26 4
gpt4 key购买 nike

你能告诉我如何以 Angular 显示和隐藏元素吗?在下面的示例中,我想最初隐藏 #item-details 并在选中复选框时显示它,或者在未选中时隐藏

<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>

<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
var app = angular.module('app', [])
.controller('checkController', function() { });
this.
});

</script>
</body>
</html>

最佳答案

首先给check box指定一个模型

<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>

然后简单地将相同的模型值分配给 ng-show 中的 item-details

<div class="col-md-6" id="item-details" ng-show="checked">

完成了

关于angularjs - 如何在 Angularjs 中显示和隐藏带有复选框状态的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32745634/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com