在 AngularJS 中只显示一个特定的 div

Question

所以我有 2 次这样的 ng 重复：

<div ng-repeat = "car in cars track by car" >
<div ng-repeat = "driver in drivers track by driver">

<div>
 <label>  {{driver}}    </label>
</div>

   <div>    <!-- div 3 -->
    {{car}} {{driver}}
   </div>

</div>
</div>

我希望当我点击某个标签时，最内部的 div (div 3) 只显示汽车和司机的特定组合。现在，当我单击标签时，它实际上会影响所有 div。例如，如果我单击驱动程序 1，那么它将显示具有驱动程序 1 的所有 divs3。基本上它会影响每辆车的所有驱动程序 1。我不想使用href。我试图为 div 3 提供一个特定的 id，并在我的控制器中激活该特定的 div；但无济于事。有什么意见吗？

详情： 基本上，布局将是 x 个 div，x 代表汽车的数量。所以假设我有 7 辆车。我将有 7 个 div 一个在另一个之上。每个 div 将有 4 个标签（如果我们有 4 个驱动程序）。所以 7divs 包含 4 个标签。 所以这 7 个 div 中的每一个都包含 4 个标签。

现在，当我单击一个驱动程序标签时，假设 div 1 (1 of 6);我想显示特定的内部 div3（div1.div3）而不显示驱动程序 1 的其他 6 个 div。所以我想能够说这辆车，驱动程序 1 有它或没有它。但现在，它会向我显示所有汽车（7 格）的驾驶员 1 的状态。它显示了所有内部 divs3。

<script>
$scope.cars = [ 'car0','car1', 'car2', 'car3', 'car4', 'car5', 'car6'];
$scope.drivers = [ 'driver0', 'driver1', 'driver2' , 'driver3']
</script>


<div0>
   'driver0'  'driver1' 'driver2' 'driver3'  
      <div 3>
      <div3>

</div0>
<div1>
   'driver0'  'driver1' 'driver2' 'driver3'  
    <div 3>
    <div3>
</div1>
<div2>
   'driver0'  'driver1' 'driver2' 'driver3'  
    <div 3>
    <div3>
</div2>
<div3>
   'driver0'  'driver1' 'driver2' 'driver3'  
    <div 3>
    <div3>
</div3>
<div4>
   'driver0'  'driver1' 'driver2' 'driver3'  
     <div 3>
     <div3>
</div4>
<div5>
   'driver0'  'driver1' 'driver2' 'driver3'  
    <div 3>
    <div3>
</div5>
<div6>
   'driver0'  'driver1' 'driver2' 'driver3'  
   <div 3>
   <div3>
</div6>


`div0`
`driver0 driver1 driver3 ....`
` -->shared space for content for drivers <---`
`div1`
`driver0 driver1 driver3 ....`
` -->shared space for content for drivers <---`

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.cars = ['car0', 'car1', 'car2', 'car3', 'car4', 'car5', 'car6'];
  $scope.drivers = ['driver0', 'driver1', 'driver2', 'driver3'];  
})

.driver {  
  cursor: pointer;
  margin-left: 15px;    
}
.content {
  margin-left: 30px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <div ng-repeat='car in cars' ng-init='temp={selected:""}'>
    {{car}}
    <div class='driver' ng-repeat='driver in drivers'>
      <span ng-click='temp.selected=driver'>{{driver}}</span>      
    </div>
    <div class='content' ng-show='temp.selected'>
        Some content for {{car}}-{{temp.selected}}
      </div>
    <br>
  </div>  
</div>