仅显示 AngularJS 中的特定 div

Question

所以我有 2 个 ng-repeats 像这样：

<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) 只显示汽车和 driver 的特定组合。现在，当我单击标签时，它实际上会影响所有 div。例如，如果我单击 driver 1，那么它会显示所有具有 driver 1 的 divs3。基本上它会影响每辆车的所有 drivers 1。我不想使用 href。我试图给 div 3 一个特定的 id，并在我的控制器中激活那个特定的 div；但无济于事。有输入吗？

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

现在，当我单击一个 driver 标签时，假设 div 1（6 个中的 1 个）；我想展示那个特定的内部 div3 (div1.div3) 而不展示 driver 1 的其他 6 divs。所以我想要能够对这辆车说，driver 1 有或没有。但是现在，它将向我显示所有汽车（7 divs）的 driver 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>

仅显示 AngularJS 中的特定 div

Showing only a particular div in AngularJS

html

angularjs

angularjs-ng-repeat