gpt4 book ai didi

javascript - AngularJS 重复列表中的数据

转载 作者:行者123 更新时间:2023-11-28 03:11:05 27 4
gpt4 key购买 nike

可能有一个简单的解决方案:

我在 Controller 中有一些数据,这取决于是否选择了项目它应该显示一些 html,如果没有选择它应该显示一些其他 html。

如果项目被选中,html 应该是:

<li>
<a href="#"><span class="fa fa-check" aria-hidden="true"></span>
<span class="sr-only">Selected:</span>Worldwide</a>
</li>

如果项目未被选中,html 应该是:

<li>
<a href="/example/link">Link</a>
</li>

如果我只需要更改类属性,这将很容易解决,然后我可以像 <span ng-class="dropdownItemClass(dropdownItem)"> 这样的东西

但我还需要添加 aria-hidden="true"如果它被选中,如果它没有被选中,则将其删除。

最佳答案

<li ng-repeat="number in numbers">
<input type="checkbox" ng-model="IsSelected">
<a href="#" ng-if="!IsSelected"><span class="fa fa-check" aria-hidden="true"></span>
<span class="sr-only">Selected:</span>Worldwide {{number}}
</a>
<a ng-if="IsSelected" href="/example/link">Link</a>
</li>

var app = angular.module('example', []);

app.controller('MainCtrl', function($scope) {
$scope.numbers = [1,2,3,4,5,6,7];
});
<!DOCTYPE html>
<html ng-app="example">

<head>
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="number in numbers">
<input type="checkbox" ng-model="IsSelected">
<a href="#" ng-if="!IsSelected"><span class="fa fa-check" aria-hidden="true"></span>
<span class="sr-only">Selected:</span>Worldwide {{number}}
</a>
<a ng-if="IsSelected" href="/example/link">Link</a>
</li>
</ul>
</body>

</html>

关于javascript - AngularJS 重复列表中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30459026/

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