All geek questions in one place

How to insert a tag in ng-repeat angular -js after every 5 elements

When using ng-repeat I need to print only 5 lines

I tried as below

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="n in names">
      <input type="checkbox" ng-click="select(n)"/>{{n}}
        <br ng-if="($n+1)%5==0">
  </div> 

</div>

But all lines are printed on one line

http://jsfiddle.net/9fR23/474/

+4
source share
5 answers

You may have this:

<div ng-repeat="n in names" style="display: inline">
  <input type="checkbox" ng-click="select(n)"/>{{n}}
  <div ng-show="($index + 1) % 5 === 0">
    <br>
  </div>
</div>

working violin

+4
source 
<div ng-app = "myApp" ng-controller="myCtrl">

<div ng-repeat="n in names">     
<input type="checkbox" ng-click="select(n)"/>
 <br ng-if="($index+1)%5==0">
</div> 
</div>
+2
source 

<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-repeat="n in names">
      <input type="checkbox" ng-click="select(n)"/>{{n}}
        <div ng-if="($index+1)%5==0"><br></div>
  </span> 
</div>
+1

<p></p>

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://code.angularjs.org/1.1.4/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil1", "Tobias2", "Linus3","Emil4", "Tobias5", "Linus6","Emil7", "Tobias8", "Linus9","Emil10", "Tobias11", "Linus12","Emil13", "Tobias", "Linus"];
  $scope.selectedNames = [];
  
  $scope.select = function(name) {
      var index = $scope.selectedNames.indexOf(name);
      if(index < 0)
          $scope.selectedNames.push(name);
      else
          $scope.selectedNames.splice(index, 1);
  }
});
  </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="n in names">
      <input type="checkbox" ng-click="select(n)"/>{{n}}
         <p ng-show="($index+1)%5==0"></p>
  </div> 
</div>
</body>
</html>
Hide result
+1

, divs 100%. bootstrap:

<div ng-app="myApp" ng-controller="myCtrl" class="row">
  <div ng-repeat="n in names" class="col-xs-2">
      <input type="checkbox" ng-click="select(n)"/>{{n}}
  </div> 
</div>

http://jsfiddle.net/f4yb539x/

5 , col.

+1

Source: https://habr.com/ru/post/1677419/

More articles:


All Articles