Question

使用ng-repeat时，我只需要连续打印

我试过如下所示

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

但所有行都打印在一行

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

Answer 1

你可以这样：

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

Answer 2

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

Answer 3

试试这个

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

Answer 4

您可以使用<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>

Answer 5

这是因为你的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 offsets解决方法。

如何在每5个元素之后在ng-repeat angular-js中插入<br/>标签

5 个答案: