Question

我试着展示＆＃34;明星＆＃34; （用于评级目的）在我的网站上。

<div>
    <span ng-repeat="_ in ((_ = []) && (_.length=fullstars) && _) track by $index" class="fa fa-star"></span>
    <span ng-repeat="_ in ((_ = []) && (_.length=halfstars) && _) track by $index" class="fa fa-star-half-o"></span>
    <span ng-repeat="_ in ((_ = []) && (_.length=emptystars) && _) track by $index" class="fa fa-star-o"></span>
    {{mark}}
</div>

为此，我展示了满星，半星和空星的数量。

问题是结果不符合预期：

＆＃34;空星＆＃34;，＆＃34;半星＆＃34;之间存在意想不到的差距。和＃34;全明星＆＃34;

谢谢

（这是您可以使用的代码段）

＆＃13;

app = angular.module('MyApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.fullStars = 2;
  $scope.halfStars = 1;
  $scope.emptyStars = 2;
});

＆＃13;

<DOCTYPE!>
  
<html ng-app="MyApp">
  <head>
    <title> My App </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body ng-controller="MainCtrl">
    
    <span ng-repeat="_ in ((_ = []) && (_.length=fullStars) && _) track by $index" class="fa fa-star"></span>
    <span ng-repeat="_ in ((_ = []) && (_.length=halfStars) && _) track by $index" class="fa fa-star-half-o"></span>
    <span ng-repeat="_ in ((_ = []) && (_.length=emptyStars) && _) track by $index" class="fa fa-star-o"></span>
    
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    
  </body>
</html>

＆＃13;

Answer 1

使用ng-class指令。（代码示例暂时在我的脑海中。）

ng-class="{fa fa-star : _.length=fullstars, 
                     fa fa-star-half-o : _.length=halfstars, 
                     fa fa-star-o : _.length=emptystars}"

Answer 2

您必须删除跨距之间的空格。应该是这样的：

<span ng-repeat="_ in ((_ = []) && (_.length=fullStars) && _) track by $index" class="fa fa-star"></span><span 
ng-repeat="_ in ((_ = []) && (_.length=halfStars) && _) track by $index" class="fa fa-star-half-o"></span><span 
ng-repeat="_ in ((_ = []) && (_.length=emptyStars) && _) track by $index" class="fa fa-star-o"></span>

当元素内联时，元素之间的空格实际上有效。

Answer 3

你可以通过这个css修复它。

span{
  float:left;
}

example

Answer 4

内联元素之间的空格是CSS中的常见问题。有一些技巧可以删除它们，但它们并非都非常“干净”。这是一篇关于这个主题的文章：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

你可以选择任何你认为最好的技巧。但是我会忘记“浮动”解决方案：浮动物体不是所有东西的解决方案......而且我也会忘记负边距，这很糟糕。

对我来说，最干净的解决方案是“0号”，虽然它有些不方便（参见文章）：你把容器上的font-size设置为零，并再次指定你想要的字体大小每个元素。

例如，在您的情况下：

div {
    font-size: 0;
}
div > span {
    font-size: 20px;
}

您可能还需要将标记包裹在范围内。

ng-repeat中元素之间的随机边界

4 个答案: