javascript - AngularJs，减少 html 模板中的逻辑

Question

我有一个 html 模板，其中 ng-ifs 和 ng-shows 中的条件变得有点太复杂，不适合在 UI 中使用。例如，这是为了确定是否应显示支付控件:

<div ng-show="ticket.status == 0 && 
  ((ticket.orgTicketId === '' && ticketControl.balance > 0 ) || 
  (ticket.orgTicketId !== '' && ticketControl.balance < 0))">

我想将其简化为这样的:

<div ng-show="ticket.paymentsAllowed">

我不想将逻辑移到 Controller 中，因为我也试图保持它尽可能干净。

在我来自的 C# 中，我只需向 Ticket 类添加一个名为 PaymentsAllowed 的属性，并将逻辑移至此处。

我对 Javascript 和 AngularJs 相当陌生，我正在寻找有关如何完成类似的事情的建议，以便我可以清理 html 模板并使它们更清晰。

Angular 应用程序从 WebAPI 后端获取 JSON，我只需将其分配给 $scope；这一切都运作良好。这是检索票证的简化示例。

ticketService 从后端读取工单 View 模型:

function getTicket(ticketId) {
    var deferred = common.$q.defer();

    common.$http.get("api/tickets/" + ticketId)
      .success(function (ticket) {
         deferred.resolve(ticket);
      }));

    return deferred.promise;
}

Controller 使用ticketService来检索ticket并分配给$scope.ticket:

ticketService.getTicket(123).then(
  function (ticket) {
    $scope.ticket = ticket;
  });

我喜欢从 WebAPI 以 JSON 数据的形式检索 View 模型并将其直接绑定(bind)到正确的范围的简单性，但是向这些 javascript 添加一些简单的业务逻辑的简单、干净的方法是什么？对象？

Answer 1

我喜欢“恢复”以 json 形式检索的数据，并通过行为来补充数据，例如如下所示:

function Ticket(data) {
  angular.copy(data, this); // copy json data into this, which will have our prototype.
}  
Ticket.prototype.paymentsAllowed = function (ticketControl) {
  return this.status == 0 && 
    ((this.orgTicketId === '' && ticketControl.balance > 0 ) || 
    (this.orgTicketId !== '' && ticketControl.balance < 0))
}

function getTicket(ticketId) {
  var deferred = common.$q.defer();

  common.$http.get("api/tickets/" + ticketId)
    .success(function (ticket) {
       deferred.resolve(new Ticket(ticket));
    }));

  return deferred.promise;
}

范围内的票证将通过原型(prototype)继承获得方法 paymentAllowed(..)，可以像这样在模板中访问该方法

<div ng-show="ticket.paymentsAllowed(ticketControl)">