模糊所有但在ng重複一個div

我正在做一個angularJS應用程序，我的目標是，當用戶點擊一個ng-repeat div內的按鈕時，它應該通過模糊所有其他條目NG-重複。我創建了一個最小的plunkr，並用下面的圖像描述了問題。模糊所有但在ng重複一個div

我有這樣的HTML

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

和空控制器：

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

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

我還添加一個image示範和用於參考創建的plunkr。我想實現圖像的底部。在此先感謝。

來源

2017-05-09 Pujan

可能的複製。檢查這個解決方案，應該爲你工作：http://stackoverflow.com/questions/19331779/how-to-highlight-a-selected-row-in-ngrepeat –

當用戶點擊一個主菜單中的按鈕ng - 重複，它應該模糊其他divs。我正在努力實現像iamge的底部結果 – Pujan

下面是我創建的示例，請參閱它。希望這可以幫助你。謝謝。

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="[email protected]" 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>

來源

2017-05-09 05:51:27

偉大的片段，在我的代碼完美工作..非常感謝 – Pujan

模糊所有但在ng重複一個div

回答

相關問題