gpt4 book ai didi

css - 模糊所有,但 ng-repeat 中的一个 div

转载 作者:太空宇宙 更新时间:2023-11-04 08:44:47 25 4
gpt4 key购买 nike

我正在制作一个 angularJS 应用程序,我的目标是,当用户单击其中一个 ng-repeat div 内的按钮时,它应该通过模糊 ng-repeat 中的所有其他条目来获得焦点。我创建了一个最小的 plunkr 并用下图描述了问题。

我有这个html

  <ul ng-repeat="detail in details">
<li>
<div style="border-style:solid;"> {{detail.name}} </div>
</li>
</ul>

和空 Controller :

  app.controller('MainCtrl', function ($scope) {
$scope.details =
[
{ "name": "Employees" },
{ "name": "Support" }
];

$scope.details.name =
[
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
});

我还添加了一个 image演示用并创建了一个 plunkr以供引用。我正在尝试实现图像的底部。提前致谢。

最佳答案

这是我创建的示例,请引用。希望这能帮助你。谢谢。

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

app.controller('MainCtrl', function($scope) {

$scope.details = [
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name = [
{ "prof": "enginerr" },
{ "prof": "doctor" }
];

$scope.isActive=false;
$scope.clickMe = function(index){
$scope.currentIndex=index;
$scope.isActive=!$scope.isActive;
}
});
/* Put your css in here */

.notActive {
pointer-events: none;
cursor: not-allowed;
opacity: 0.3;
}
<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li style="border-style:solid;" ng-class="{'notActive':isActive && currentIndex!=$index}">
<div > {{detail.name}} </div>
<button ng-click="clickMe($index)">Click me</button>
</li>
</ul>
</body>

</html>

关于css - 模糊所有,但 ng-repeat 中的一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43861062/

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