Question

我正在创建一个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>

和空控制器：

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

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

我还添加了image用于演示并创建了plunkr以供参考。我试图实现图像的底部。提前谢谢。

Answer 1

这是我创建的样本，请参考它。希望这可以帮到你。感谢。

＆＃13;

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;
    }
});

＆＃13;

/* Put your css in here */

.notActive {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
}

＆＃13;

<!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>

＆＃13;

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

1 个答案: