angular.js - angular-translate Is there any good way to conditionally output terms?

Question

Recently, the company's products need to support multi-language support, and angular-translate is used to do it, which is basically smooth.

Then I came across some templates that said:

{{gender ? '男' : '女'}}

Obviously, filter cannot be used directly. Currently, it is rewritten using ngIf, similar to this:

<span ng-if="gender">{{'common.male' | translate}}</span>
<span ng-if="!gender">{{'common.female' | translate}}</span>

But what if you don’t want the extra span? Sometimes I'm annoyed by this aspect of Angular. You have to clean up some useless tags for some instructions. What are your thoughts?

Answer 1

<span>{{ (gender?'common.male':'common.female') | translate}}</span>

Answer 2

The poster may try to use a controller method to implement it, such as:

<!-- template file -->
<span ng-bind="showGender(gender)"></span>

// angular controller
app.controller('MyCtrl', function ($scope, $filter)) {
    $scope.showGender = function (gender) {
        return $filter('filter_name')(gender);
    }
};

In this way, although the redundancy in html is reduced, the amount of code increases.

Answer 3

The person who wrote this must be the principal!

Answer 4

So profound