javascript - 在带有 Angular 转发器的表中使用数据输出函数

Question

我对编写像样的 JS 还很陌生，对 Angular 也是全新的。

我正在尝试构建一个非常小的应用程序，该应用程序从外部 JSON 获取数据并将其输出到表中。我已经完成了那部分，现在我想尝试操作一些数据。

我使用 Angular ng-repeater 将数据输出到表中:

 <tr ng-repeat="pattern in pattern">
   <td>{{ pattern.brand }}</td>
   <td>{{ pattern.name }}</td>
   <td>{{ pattern.size }}</td>
   <td>{{ pattern.quantity}}</td>
   <td>{{ pattern.fabricType }}</td>
 </tr>

一切正常(see this codepen)。

现在我想通过创建一些自定义函数来开始处理数据。我读了一个教程，其中有一个简短的函数，它将 firstName 和 lastName 字段中的数据连接到 fullName 中，并将它们输出到表中。该函数如下所示:

fullName: function() {
  var studentObject;
  studentObject = $scope.student;
  return studentObject.firstName + " " + studentObject.lastName;
}

引用:http://www.tutorialspoint.com/angularjs/angularjs_tables.htm

它是在 HTML 中使用 {{student.fullName()}} 调用的。我想做类似的事情。如果我的 quantity data = -1 我实际上想在表中将其输出为 Unlimited。

我写了这个函数:

// Function to name the quantity field correctly
    function quantityLabel() {
        if ($scope.pattern.quantity == -1){
            return 'Unlimited';
        }else {
            return quantity;
        }
    }

但我想不出一种简洁的方法来编写这样的函数并在模板中调用它，就像在教程中那样。

Here's my broken codepen .我做错了什么？

Answer 1

在你的 Controller 中试试这个:

$scope.quantityLabel = function (quantity) {
    return quantity === -1 ? 'Unlimited' : quantity;
}

然后在您的模板中这样调用它:

<td>{{quantityLabel(pattern.quantity)}}</td>

编辑:

只是为了澄清一下这里发生了什么，您想将一个函数附加到范围，该函数获取数量值，修改它并返回您想要的值。如您所见，scope 函数接受一个参数“quantity”，如果值为 -1，则返回一个字符串“infinity”。如果不是，则返回原始数量。在模板中，我们通过 $scope.pattern.quantity 调用此函数。

每个摘要周期，angular 都会将 $scope.pattern.quantity 传递给函数并显示它的返回值。