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的div.3。基本上它会影响每辆车的所有驱动程序1。我不想使用href。我试图给div 3一个特定的id，并在我的控制器中激活那个特定的div;但无济于事。有什么输入吗？

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

现在，当我点击一个驱动程序标签时，让我们说div 1（1/6）;我想显示特定的内部div3（div1.div3），而不显示驱动程序1的其他6个div。所以我想能够说这辆车，驱动程序1有它或没有它。但是现在，它将向我展示所有车辆（7个div）的驾驶员1的状态。它显示了所有内部div3。

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在AngularJS中仅显示特定div

1 个答案: