случайное поле между элементом в ng-повторе

Question

случайное поле между элементом в ng-повторе

0

Я пытаюсь показать "звезды" (для целей рейтинга) на своем веб-сайте.

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

Для этого я показываю число полных звезд, полузвезд и пустых звезд.

Проблема в том, что результат не так, как ожидалось:

Появляются неожиданные поля между группами "пустых звезд", "полузвезд" и "звезд",

спасибо

(Вот фрагмент кода, с которым вы можете играть)

app = angular.module('MyApp', []);

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

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

Epitouille 26 янв. 2016, в 18:56

Источник

0

используйте свой веб-инспектор и посмотрите, есть ли поля или отступы. Вы также можете попытаться поставить пролеты на одной линии
Ronnie 26 янв. 2016, в 17:34
0

не могли бы вы предоставить поршень?
Ignacio Villaverde 26 янв. 2016, в 18:03
0

codepen.io/anon/pen/Ywavgx кодовая ручка
Epitouille 26 янв. 2016, в 18:03

Показать ещё 1 комментарий

Теги:

angularjs

angularjs-ng-repeat

font-awesome

4 ответа

Ещё вопросы

используйте свой веб-инспектор и посмотрите, есть ли поля или отступы. Вы также можете попытаться поставить пролеты на одной линии
не могли бы вы предоставить поршень?

Eria · Answer 1 · 2016-01-27T05-26-00.000Z

Пространства между встроенными элементами - общая проблема в CSS. Есть некоторые трюки, чтобы удалить их, но они не все очень "чисты". Вот статья о предмете: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Вы можете выбрать любой трюк, который вы считаете лучшим. Но я бы забыл решение "float": плавающие объекты не являются решением всего... И я тоже забуду отрицательные поля, это ужасно.

Для меня самым чистым решением является "размер 0", хотя он имеет некоторые неудобства (см. Статью): вы помещаете размер шрифта в ноль в контейнере и снова указываете размер шрифта, который вы хотите для каждого элемента.

Например, в вашем случае:

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

Вероятно, вам понадобится также обернуть метку в промежутке.

ofir fridman · Answer 2 · 2016-01-26T16-28-00.000Z

вы можете исправить это с помощью css.

span{
  float:left;
}

пример

Batuta · Answer 3 · 2016-01-26T15-34-00.000Z

Используйте директиву ng-class. (Образец кода сейчас на моем уме).

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

tanenbring · Answer 4 · 2016-01-26T15-24-00.000Z

Вы должны удалить пробелы между пролетами. Должно выглядеть так:

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

Наличие пробелов между элементами фактически имеет эффект, когда элементы являются встроенными.