javascript - 对于水平 ng-repeat，如何删除元素之间的空格并将其与第二个 ng-repeat 同步

Question

我正在尝试打印出一个 ng-repeat 元素之间没有所有空格。我希望它是现在的一半左右。

我还需要它与下面的另一个 ng-repeat 同步。

我怎样才能做到这一点？现在就在这里:

$scope.profileCompare = {

  You: {
    questionAnswer: [false, true, false, false, false, false],
    percent: ['20%', '40%', '60%', '80%', '100%'],
    questionImportance: "Unimportant"
  },
  Pizza: {
    questionAnswer: [true, false, false, false, false, false],
    percent: ['20%', '40%', '60%', '80%', '100%'],
    questionImportance: "Important"
  },
  Greenie: {
    questionAnswer: [false, true, false, false, true, false],
    percent: ['20%', '40%', '60%', '80%', '100%'],
    questionImportance: "Very Important"
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

<script src="https://code.jquery.com/jquery.min.js"></script>

<div>
  <div ng-repeat="(key, value) in profileCompare">
    <p>{{value.questionImportance}}</p>
    <ul class="comparison-list">
      <li ng-repeat="answer in value.questionAnswer track by $index" style="position:relative; display:block; float:right" class="fa-li fa" ng-class="{green:answer, red:!answer, 'fa-check-square':answer, 'fa-square':!answer}">
      </li>
      <br>
      <li ng-repeat="percent in value.percent track by $index" style="position:relative; float:right">
        {{percent}}
      </li>
      <br>
      <br>
    </ul>
  </div>
</div>

我需要缩小它们两个元素之间的空间，并让 answer in value.questionAnswer 的第一个 ng-repeat 同步到第二个 的正上方value.percent 中的百分比。现在，它向左偏移了大约一个元素。

Answer 1

我认为获得正确样式的问题在于 answer 和 percent 数组的长度不同。如果你能把它们做成相同的尺寸会更容易。 (例如，两个 5 项)。

无论如何，如果您需要它们，您可以使用表格来完成(如评论中所建议的)。为了使它们看起来更好，您可以将 colspan=2 添加到百分比单元格。由于长度不同，因此需要。

请看下面的演示或这个 jsfiddle .

angular.module('demoApp', [])
    .controller('mainController', function ($scope) {
    $scope.profileCompare = {

        You: {
            questionAnswer: [false, true, false, false, false, false],
            percent: ['20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Unimportant"
        },
        Pizza: {
            questionAnswer: [true, false, false, false, false, false],
            percent: ['20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Important"
        },
        Greenie: {
            questionAnswer: [false, true, false, false, true, false],
            percent: ['20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Very Important"
        }
    }
});

td {
    text-align: center;
    /*border: 1px solid black;*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <div ng-repeat="(key, profile) in profileCompare">
        <p>{{profile.questionImportance}}</p>
        {{key}}
        <table>
            <tr>
                <td ng-repeat="answer in profile.questionAnswer track by $index"><i class="fa" ng-class="{green:answer, red:!answer, 'fa-check-square':answer, 'fa-square':!answer}"></i></td>
            </tr>
            <tr>
                <td ng-repeat="percent in profile.percent track by $index" colspan="{{$index == 0? 2: ''}}">
                    {{percent}}</td>
            </tr>
        </table>
    </div>
</div>