ng-repeat、ng-click詳細の説明を表示

Question

<div ng-controller = "MyController"> 
    <ul class="items" > 
     <div ng-repeat="item in colors" ng-class="{active:isActive(item)}" ng-click="select(item); whattoshow=!whattoshow"> 
      <li class="col-md-3 col-sm-3 col-lg-3 col-xs-3" > 
          <img class="img-responsive" ng-src="images/colors/{{item.number}}.jpg"> 
      </li> 

      <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12" ng-class="whattoshow && isActive(item) ? 'show' : 'hidden'}"> 
          <h2>{{item.bio}}</h2> 

      </div> 
     </div> 
     </ul> 
</div> 

これは私のHTMLコードです。コントローラはJSONファイルを使用して項目を通過します。アイテムをクリックすると表示されますそれの説明。私はこの不十分な絵（http://i.stack.imgur.com/FCvmd.png）に表示しようとすると、商品の画像の後に商品のバイオを表示させることができますが、すべての説明がそれ自身の商品画像に対応するので、表示順序を変更します。私はすべての商品説明を自分の商品の行の下にクリックして表示します。

ここに私の角度コントローラーが必要です。

var myApp = angular.module('ProjectAssembly', []); 

myApp.controller('MyController', ['$scope', '$http', function($scope, $http) { 
$http.get('data/color.json').success(function(data) { 
    $scope.colors = data; 
}); 




$scope.select= function(item) { 
     $scope.selected = item; 
}; 
$scope.isActive = function(item) { 
     return $scope.selected === item; 
}; 


}]); 

私はあなたが私の場合に役立つことを願って、それは簡単なように見えたが、私は解決策を見つけることができません：/

Answer 1

必要なものng-repeat-startとng-repeat-endあると行にデータを分割します。 、より高速なコメントではないため

var myApp = angular.module('ProjectAssembly', []); 
 

 
myApp.controller('MyController', ['$scope', '$http', 
 
    function($scope, $http) { 
 
    //$http.get('data/color.json').success(function(data) {}); 
 
    $scope.colors = [{ 
 
     number: 1, 
 
     bio: '1111111111111111111111111111111111111111' 
 
    }, { 
 
     number: 2, 
 
     bio: '2222222222222222222222222222222222222222' 
 
    }, { 
 
     number: 3, 
 
     bio: '33333333333333333333333333333333333333333' 
 
    }, { 
 
     number: 4, 
 
     bio: '4444444444444444444444444444444444444444' 
 
    }, { 
 
     number: 5, 
 
     bio: '55555555555555555555555555555' 
 
    }] 
 

 
    $scope.colors = (function(data) { 
 
     var result = []; 
 
     angular.forEach(data, function(val, index) { 
 
     var key = Math.floor(index/4); 
 
     if (!result[key]) { 
 
      result[key] = []; 
 
     } 
 
     result[key].push(val); 
 
     }); 
 
     return result; 
 
    })($scope.colors); 
 

 

 

 
    $scope.select = function(item, rowIndex, columnIndex) { 
 
     if (item == $scope.selected) { 
 
     $scope.selected = null; 
 
     $scope.selectedRowIndex = null; 
 
     $scope.selectedColumnIndex = null; 
 
     return false; 
 
     } 
 
     $scope.selected = item; 
 
     $scope.selectedRowIndex = rowIndex; 
 
     $scope.selectedColumnIndex = columnIndex; 
 
    }; 
 
    $scope.isActive = function(item) { 
 
     return $scope.selected === item; 
 
    }; 
 

 

 
    } 
 
]);

.item-tr { 
 
    border: 1px solid #555; 
 
    margin-top: 5px; 
 
    position: relative; 
 
    background: #555; 
 
} 
 
.item-tr:before { 
 
    content: ' '; 
 
    position: absolute; 
 
    border-top: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 5px solid #555; 
 
    top: -11px; 
 
} 
 
.item-tr-0:before { 
 
    left: 12.5%; 
 
} 
 
.item-tr-1:before { 
 
    left: 37.5%; 
 
} 
 
.item-tr-2:before { 
 
    left: 62.5%; 
 
} 
 
.item-tr-3:before { 
 
    left: 87.5%; 
 
} 
 
.item-td { 
 
    border: 1px solid #555; 
 
}

<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet"> 
 
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"> 
 
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> 
 
<script src="//cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.js"></script> 
 
<script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script> 
 
<div ng-app="ProjectAssembly"> 
 
    <div ng-controller="MyController"> 
 
    <ul class="items"> 
 
     <li ng-repeat-start="row in colors track by $index" class="row"> 
 
     <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3 item-td" ng-repeat="item in row" ng-class="{active:isActive(item)}" ng-click="select(item,$parent.$index,$index); whattoshow=!whattoshow"> 
 
      <span> 
 
      <img class="img-responsive" ng-src="images/colors/{{item.number}}.jpg"> 
 
       {{item.number}} 
 
     </span> 
 

 

 
     </div> 
 
     </li> 
 
     <li ng-repeat-end ng-show="selected && selectedRowIndex==$index" class="row item-tr item-tr-{{selectedColumnIndex}}"> 
 
     <div> 
 
      <h2>{{selected.bio}}</h2> 
 

 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>