javascript - Adding Span iconsglyphicongraph in td based on conditionnumber using AngularJs - Stack Overflow

admin管理员组

文章数量:1313112

I am trying to add span icons/glyph-icon using angular in td before country, i have used the following code to do so but i need to do more nicer way dynamically. need your help.

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

I am trying to add span icons/glyph-icon using angular in td before country, i have used the following code to do so but i need to do more nicer way dynamically. need your help.

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

• javascript
• jquery
• html
• css
• angularjs

Share Improve this question Follow asked Jan 8, 2016 at 12:20 RRPANDEYRRPANDEY 23511 gold badge44 silver badges1818 bronze badges 1

• 1 Take a look at this question, you could do something similar: stackoverflow./questions/16824853/… – Etse Commented Jan 8, 2016 at 12:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Create a function to get an array of star numbers then use it on 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>

Based on the answer provided by @koga, another way to do is not using the 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>

You could use a second ng-repeat:

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

Here is a more easy solution. Create some CSS that generates the stars :

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

...etc. Then use a ng-class function to set the correct star according to the rating :

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

working demo -> http://plnkr.co/edit/h3JsormYIZ6th3Kvblh5?p=preview

本文标签： javascriptAdding Span iconsglyphicongraph in td based on conditionnumber using AngularJsStack Overflow