使用AngularJs根据条件/数字在td中添加跨度图标/字形图标/图形答案

【问题标题】：Adding Span icons/glyphicon/graph in td based on condition/number using AngularJs使用AngularJs根据条件/数字在td中添加跨度图标/字形图标/图形
【发布时间】：2016-04-13 03:14:31
【问题描述】：

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

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

【问题讨论】：

看看这个问题，你可以做类似的事情：stackoverflow.com/questions/16824853/…

标签： javascript jquery html css angularjs

【解决方案1】：

您可以使用第二个 ng-repeat：

<span ng-repeat="idx in country.rating track by $index" class="glyphicon glyphicon-star"</span>

【讨论】：

country.rating 是一个数字而不是一个数组。 ng-repeat 适用于数字？ stackoverflow.com/questions/16824853/…
当 country.rating 是一个数字而不是一个集合时，这是否有效？

【解决方案2】：

创建一个函数来获取一个星号数组然后在 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>

【讨论】：

古贺。我只有印度和美国的明星，其他国家没有图标
在 ng-repeat 上通过 $index 添加音轨

【解决方案3】：

这是一个更简单的解决方案。创建一些生成星星的 CSS ：

.star {
    color: orange;
}
.star1:before {
    content : '★'
}
.star2:before {
    content : '★★'
}

...等等。然后使用ng-class 函数根据评分设置正确的星级：

<tr ng-repeat="country in countries">
    <td>
        <span ng-class="stars(country.rating)"></span>
        <span>
            {{ country.name}}
        </span>
    </td> 
    <td>{{country.other}}</td>
</tr>
</table>

$scope.stars = function(rating) {
   return 'star star'+rating;
}

工作演示 -> http://plnkr.co/edit/h3JsormYIZ6th3Kvblh5?p=preview

【讨论】：

【解决方案4】：

根据@koga 提供的答案，另一种方法不使用track by：

$scope.getArrayNumber = function(num) {
    var array = [];
    for (var i = null; i < num; i++) {
        array.push(i);
    };
   return array;   
};

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

【讨论】：