Question

我计划在我的应用程序中运行各种计算以显示不同的消息/类，我不确定在Angular中执行此操作的最优雅/最佳实践方法是什么。

下面是我想要实现的一个简单示例，不过我的计划是创建更复杂的表达式，这些表达式对我来说没有意义保留在标记中。

<li ng-repeat="goal in goals"> 
<strong ng-show="((goal.count / goal.goalNumber) * 100) == 0"> Get to work</strong>
<strong ng-show="((goal.count / goal.goalNumber) * 100) == 50"> Half way there!</strong>
<strong ng-show="((goal.count / goal.goalNumber) * 100) == 100"> Success!!</strong>
</li>

有人可以推荐一种更模块化/可重复使用的方法吗？我想一个方法是创建一个我可以在整个模板中使用的函数？但是如何在该函数中获得每个“目标”迭代的goal.count和goal.goalNumber？这会是我从我的控制器那里调用的，还是指令是一个更好的存储位置？

非常感谢。

Answer 1

标记

<li ng-repeat="goal in goals"> 
<strong ng-show="zeroGoals($index)"> Get to work</strong>
<strong ng-show="fiftyGoals($index)"> Half way there!</strong>
<strong ng-show="oneHundredGoals($index)"> Success!!</strong>
</li>

的js

$scope.zeroGoals = function(index){
       return (($scope.goals[index].count / $scope.goals[index].goalNumber) * 100) == 0;
};

$scope.fiftyGoals = function(index){
       return (($scope.goals[index].count / $scope.goals[index].goalNumber) * 100) == 50;
};

$scope.oneHundredGoals = function(index){
       return (($scope.goals[index].count / $scope.goals[index].goalNumber) * 100) == 100;
};

Answer 2

将控制器附加到ng-repeat所在的元素。该控制器可以访问循环变量。 Example：

查看

<div ng-app="app" ng-controller="Controller">
    <div ng-repeat="item in items" ng-controller="RepeatController">
        {{item}}: {{doubleItem()}}
    </div>
</div>

控制器

angular.module('app', [])
.controller('Controller', function ($scope) {
    $scope.items = [1, 2, 3, 4];

})
.controller('RepeatController', function ($scope) {  
    $scope.doubleItem = function () { 
        return $scope.item * 2; 
    };
})

Answer 3

有点改善......

HTML

<li ng-repeat="goal in goals">  
    <strong ng-show="geq(goal, 0)"> Get to work</strong>
    <strong ng-show="geq(goal, 50)"> Half way there!</strong>
    <strong ng-show="geq(goal, 100)"> Success!!</strong>
</li>

JS

$scope.geq = function(g, n){
   return ((100 * g.count / g.goalNumber ) === n);
};

Answer 4

在视图中使用过滤器，如下所示：

 <strong ng-if="'goal.count ¦ isGoal : goal.goalNumber : 50">

和过滤器：

 app.filters('isGoal', function() {

     return function(count, goalNumber, reached) {
         return (count / goalNumber) == reached;
     }

 });

Angular.js - 在范围内使用函数的优雅方式

4 个答案: