javascript - 使用 AngularJs 根据条件/数字在 td 中添加 Span 图标/字形/图形

Question

我正在尝试在国家/地区之前使用 td 中的 Angular 添加跨度图标/字形图标，我使用了以下代码来执行此操作，但我需要动态地做更好的方法。 需要你的帮助。

    $scope.countries = [
        {name: 'Australia', rating: 0, other: "lorem ipsum"},
        {name: 'India', rating: 1, other: "lorem ipsum"},
        {name: 'Canada', rating: 3, other: "lorem ipsum"},
        {name: 'Mexico', rating: 2, other: "lorem ipsum"},
        {name: 'UK', rating: 4, other: "lorem ipsum"},
        {name: 'Germany',rating: 2, other: "lorem ipsum"},
        {name: 'USA',rating: 1, other: "lorem ipsum"}
    ];

<tr ng-repeat="country in countries">
    <td>
        <span ng-if="country.rating == 1">
                <span class="glyphicon glyphicon-star"></span>
         </span>
        <span ng-if="country.rating == 2">
                <span class="glyphicon glyphicon-star"></span>
                <span class="glyphicon glyphicon-star"></span>
         </span>
        <span ng-if="country.rating == 3">
            <span class="glyphicon glyphicon-star"></span>
            <span class="glyphicon glyphicon-star"></span>
            <span class="glyphicon glyphicon-star"></span>
      </span>
        <span ng-if="country.rating == 4">
        <span class="glyphicon glyphicon-star"></span>
            <span class="glyphicon glyphicon-star"></span>
            <span class="glyphicon glyphicon-star"></span>
            <span class="glyphicon glyphicon-star"></span>
            <span class="glyphicon glyphicon-star"></span>
      </span>
        <span>
            {{ country.name}}
        </span>
    </td>
    <td>{{country.other}}</td>
</tr>

Answer 1

创建一个函数来获取星号数组 然后在 ng-repeat 上使用它

$scope.getArrayNumber = function(num) {
   return new Array(num);   
};


<tr ng-repeat="country in countries">
   <td>
      <span ng-repeat="star in getArrayNumber(country.rating) track by $index">
          <span class="glyphicon glyphicon-star"></span>
      </span>
      <span>
          {{country.name}}
      </span>
   </td>
</tr>