项目的角度列表 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>