I'm currently working with an HTML template that has some complex conditionals in the ng-ifs and ng-shows. For example, here's how I determine if payment controls should be displayed:
<div ng-show="ticket.status == 0 &&
((ticket.orgTicketId === '' && ticketControl.balance > 0 ) ||
(ticket.orgTicketId !== '' && ticketControl.balance < 0))">
However, I would like to simplify this to something more readable like:
<div ng-show="ticket.paymentsAllowed">
Instead of moving the logic into the controller, I'd prefer to keep it clean and manageable within the HTML.
In C#, I would typically add a property to the Ticket class called PaymentsAllowed and handle the logic there.
As someone new to Javascript and AngularJS, I could use some advice on achieving a similar approach to simplify the HTML templates and enhance readability.
The Angular app receives JSON data from a WebAPI backend, which is then assigned to the $scope without any issues. Here's a basic example of fetching a ticket.
The ticketService retrieves the ticket view model from the backend:
function getTicket(ticketId) {
var deferred = common.$q.defer();
common.$http.get("api/tickets/" + ticketId)
.success(function (ticket) {
deferred.resolve(ticket);
}));
return deferred.promise;
}
The controller utilizes the ticketService to fetch the ticket and assign it to $scope.ticket:
ticketService.getTicket(123).then(
function (ticket) {
$scope.ticket = ticket;
});
While I appreciate the simplicity of retrieving JSON data from the WebAPI and binding it directly to the scope, I'm curious about a straightforward method to incorporate simple business logic into these JavaScript objects.