Question

我正在尝试根据评分值打印多个*。在Javascript控制台Array(10).join('*')生成10颗星。在Angularjs视图中使用它时，不会计算此表达式。我错过了什么吗？

<div data-ng-controller="SkillsController">
 <ul>
   <li data-ng-repeat="skill in skills">{{skill.name}} - {{Array(skill.rating).join('*')}}</li>
 </ul>
</div>

App.js

app.controller('SkillsController', function($scope){
    $scope.skills = [
        { name: 'Ruby', rating: 5 },
        { name: 'Java', rating: 10}
    ];
})

Answer 1

数组不是$ scope的一部分。您可以在控制器中执行以下操作。

app.controller('SkillsController', function($scope){
    $scope.skills = [
        { name: 'Ruby', rating: 5 },
        { name: 'Java', rating: 10}
    ];

    $scope.Array = Array; 
});

然而，我会在过滤器或指令中进行此转换。

app.filter('stars', function() {
  return function(input) {
    return Array(input).join('*');
  };
});

然后

{{skill.rating | stars}}

Answer 2

从我的角度来看，在$ scope控制器中创建方法的最佳方法是根据需要转换评级。从这个方法调用另一个投入使用的方法。因此，您将业务逻辑与表示逻辑和视图分开。

所以，查看

<div data-ng-controller="SkillsController">
  <ul>
    <li data-ng-repeat="skill in skills">{{skill.name}} - {{ getRating(skill) }}</li>
  </ul>
</div>

控制器

app.controller('SkillsController', function($scope, myService){
    $scope.skills = [
        { name: 'Ruby', rating: 5 },
        { name: 'Java', rating: 10}
    ];
    $scope.getRating = function (skill) {
        return myService.transformRatings(skill.rating);
    }
});

服务：

app.service('myService', function(){
    return {
        transformRatings: function (stars) {
            return Array(stars).join('*');
        }
    }
});

如何修复此表达式

2 个答案: