Question

我从Google电子表格中提取数据，输入类似于＆＃34; 4-asdf＆＃34;。

我使用Javascript将其拆分为破折号，如此

var arr = input.split('-');
var stars = arr[0];

我想解析星星元素，以便为评级添加该数量的星星。此代码位于名为parseRating的$ scope函数中。

在前端，我有一些东西

<div ng-repeat="place in places">
  {{ parseRating(place.input) }}
</div>

有什么方法可以用Angular返回图像吗？我知道我可以使用该函数返回字符串。或者有更简单的方法来实现这一目标吗？

Answer 1

如果我理解正确，你想根据评级重复相同的元素（星形图像）。

所以我会这样做

<div ng-repeat="star in parseRating(place.input) track by $index">
    <img src="star.gif" >
<div>

在控制器中我会做类似的事情：

$scope.parseRating = function(input) {
    var arr = input.split('-');
    var stars = arr[0];
    return new Array(stars * 1);   
};

这是一个plunker

Answer 2

如果你想用半星做，你可以这样做：

$scope.parseRating = function(input) {
    var starSrc = 'http://aslservices.com/wp-content/uploads/2012/05/star.png';
    var halfStarSrc = 'http://static.comicvine.com/uploads/original/12/123796/4243160-0250959220-half-.jpg';
    var arr = input.split('-');
    var stars = arr[0];
    var srcs = [];

    for(var i = 0; i < stars[0] *1; i++){
      srcs.push(starSrc);
    }
    if(stars.length > 1) srcs.push(halfStarSrc);
    return srcs;
};

然后在你的html代码中，你这样做：

<div ng-repeat="star in parseRating('2.5-kl') track by $index">
      <img src="{{star}}">
    </div>

这是plunker

使用Angular函数根据输入动态添加大量图像

2 个答案: