ng-repeat的项目的角度列表，ng-click显示全角说明 [英] Angular list of items ng-repeat, ng-click show description on full width

问题描述

<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 )，我可以使bio物品出现在物品的图片之后，但是由于每个描述都对应于其自己的物品图片，因此更改了我的显示顺序.我希望每个项目的描述都显示在他自己的项目行下方的点击中.

That is my HTML code, the controller uses a JSON file to go through the items, and if you click on an item you shall see the description of it. As I try to show in this poorly drawn picture (http://i.stack.imgur.com/FCvmd.png), I can make the item bio appear after the item's picture, but as every description corresponds to its own item picture it makes my display order to change. I want every items description show on click below his own row of items.

如果需要的话，这里是我的角度控制器.

Here is my angular controller if needed.

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


}]);

希望您能帮我解决这个问题，这似乎很简单，但是我找不到解决方法:/

I hope you can help my case, it seemed to be easy, but I can't find the solution :/

推荐答案

您需要的是 ng-repeat-start 和 ng-repeat-end 并拆分数据成行.

What you need is ng-repeat-start and ng-repeat-end and split your data into rows.

查看示例中的详细信息:

See details in example:

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>

这篇关于ng-repeat的项目的角度列表，ng-click显示全角说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！