请看下图:
我有 following代码，现在我想始终在一行中显示所有元素(圆圈)(取决于屏幕尺寸)，但最后一项应该始终在原位(在台式机、平板电脑、移动设备上)。
<body ng-controller="MainCtrl">
<button class="btn-select-user" ng-repeat="item in items | limitTo: limit as result">
<span>
<img ng-class="{}" ng-src="https://graph.facebook.com/4/picture?height=46&type=square&width=46" width="40" height="40" src="https://graph.facebook.com/4/picture?height=46&type=square&width=46">
</span>
</button>
<span class="badge pull-right" ng-click="limit = items.length" ng-hide="limit == items.length">Show all</span>
</body>
有什么建议吗？
最佳答案
您可以使用自定义指令来执行此操作。工作 plunker:http://plnkr.co/edit/4m3xU5JQqL4R5YPrYIdC?p=preview
<span ng-repeat="item in items | limitTo:numDisplay">
<span class="huge" ng-class="{'last':$last}">{{item}}</span>
</span>
您需要将此指令添加到 body 标记中:
<body resizable>
指令:
app.directive("resizable", ["$window", function($window){
return function($scope) {
$scope.initializeWindowSize = function() {
//do the screen width check
if($window.innerWidth < 641)
$scope.numDisplay = 3;
else if($window.innerWidth > 640 && $window.innerWidth < 800)
$scope.numDisplay = 5;
else
$scope.numDisplay = 10;
//check console see if it's correct
console.log($window.innerWidth, $scope.numDisplay);
//return the inner width
return $scope.windowWidth = $window.innerWidth;
};
$scope.initializeWindowSize();
return angular.element($window).bind('resize', function() {
$scope.initializeWindowSize();
return $scope.$apply(); //run digest
});
};
}])
关于javascript - 在一行中显示所有元素，但保留最后一项空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37553462/