Javascript IF return content

Question

Good morning to all,

I have a certain problem, if it was in pure Javascript I would have done using if and else no problems, as I did in another file and it worked!

Basically the HTML file (with Angularjs):

    <div data-ng-include src="'views/includes/connection.html'"></div>

<div class="box" ng-controller="TokensSearchController as TSC" ng-init="TSC.init()">
    <div class="heading margin1">
        <div class="ov">
            <h1 class="heading__title">Search for Token Contract</h1>
        </div>
    </div>
    <div class="search__box">
        <div class="search__wrap search__wrap-token">
            <div ng-if="TSC.error" class="error__text fsz-12 c-red pos-abs-top-right">{{ TSC.error }}</div>
            <input autocomplete="off" type="text" name="query" ng-model="TSC.query" ng-change="TSC.changeQuery()" class="field search__field" ng-class="{'error': TSC.error}" placeholder="Enter an HRC20 Contract Address or Token Name">

            <div class="search__results active" ng-if="TSC.searchResult && TSC.searchResult.items.length">
                <div class="ddMenu">
                    <ul class="ddMenu__list">
                        <li class="ddMenu__item" ng-repeat="item in TSC.searchResult.items">
                            <a href="/token/{{ item.contract_address }}" class="ddMenu__link">
                                <span class="ddMenu__linkRow">{{ item.name ? item.name : item.contract_address }} {{ item.symbol ? '(' + item.symbol + ')' : '' }}</span>
                                <span class="ddMenu__linkRow muted">
                                        HRC20 TOKEN: {{ item.contract_address }}
                                    </span>
                                <span class="ddMenu__linkRow muted">
                                        {{ $root.token.convertDecimals(item.total_supply, item.decimals) }} {{ item.symbol }}
                                    </span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="search__notFound active" ng-if="TSC.query && !TSC.inProcess && (!TSC.searchResult || !TSC.searchResult.items.length)">
                <p>No matching records found!</p>
            </div>
        </div>
        <div class="search__btnBox">
            <button class="btn btn-blue btn-h-lg" ng-click="TSC.search()" ng-if="!TSC.inProcess">Search</button>
            <button class="btn btn-blue btn-h-lg preload-btn" ng-if="TSC.inProcess"><span class="preload preload-sm preload-dark preload-pos-abs" ></span></button>
            <button class="btn btn-transp btn-h-lg" ng-click="TSC.reset()">Reset</button>
        </div>
    </div>
    <section class="section section-tokenSearchTable">
        <div class="table">
            <div class="tr tr-head">
                <div class="th">Token Information</div>
                <div class="th">Total supply</div>
                <div class="th">Token Holders</div>
                <div class="th">Contract Address</div>
            </div>
            <div class="tr" ng-repeat="contract in TSC.contractsList">
                <div class="td">
                    <div class="">
                        <a href="/token/{{ contract.contract_address }}" class="ellipsis mark title">{{ contract.symbol }} {{ contract.name ? ((contract.symbol ? '- ' : '') + contract.name ) : '' }}</a>

                    </div>
                    <div ng-if="contract.description" class="descr muted">
                        {{ contract.description }}
                    </div>
                </div>
                <div class="td">{{ $root.token.convertDecimals(contract.total_supply, contract.decimals) }}</div>
                <div class="td">{{ contract.count_holders | numeraljs : '0,0[.][00000000]' }}</div>
                <div class="td">
                    <a href="/address/{{ contract.contract_address }}" class="ellipsis mark">{{ contract.contract_address }}</a>
                </div>
            </div>
        </div>
    </section>
</div>

What I basically want is to make a check whether contract.symbol is equal to X that it returns something like:

<a href="/token/{{ contract.contract_address }}" class="ellipsis mark title">{{ contract.symbol }} {{ contract.name ? ((contract.symbol ? '- ' : '') + contract.name + " [FAKE]" ) : '' }}</a>

Otherwise, it returns the normal line:

<a href="/token/{{ contract.contract_address }}" class="ellipsis mark title">{{ contract.symbol }} {{ contract.name ? ((contract.symbol ? '- ' : '') + contract.name ) : '' }}</a>

Does anyone know how to do this? I am zero to left with Angular and I need to deliver it immediately.

I tried to use tags

<script> if (contract.symbol == 'X') {
return 'fonte html com angular';
}
</script>

But it didn’t work.

Thank you!

Answer 1

Hello, If I understand correctly, you want to show one content and hide another according to a sentence. With Angularjs there are some ways to do this, I’ll show you some:

• ngIf

using the directive ng-if you can create a tag to be rendered if the return of the condition is true and a tag for the return for false ex:

<div ng-if=" exp===3 ">exp é igual a 3</div>
<div ng-if=" exp!==3 ">exp é diferente de 3</div>

• ngShow and ngHide

You can use the same ngIf effect in two different directives:

<div ng-show=" exp===3 " ng-hide=" exp!==3 ">exp é igual a 3</div>
<div ng-show=" exp!==3 " ng-hide=" exp===3 ">exp é diferente de 3</div>

however I believe that the first option, using the ngIf, be simpler.

For the case you presented would look something like:

<a ng-if="contract.symbol === 'X'" href="/token/{{ contract.contract_address }}" class="ellipsis mark title">{{ contract.symbol }} {{ contract.name ? ((contract.symbol ? '- ' : '') + contract.name + " [FAKE]" ) : '' }}</a>

<a ng-if="contract.symbol !== 'X'" href="/token/{{ contract.contract_address }}" class="ellipsis mark title">{{ contract.symbol }} {{ contract.name ? ((contract.symbol ? '- ' : '') + contract.name ) : '' }}</a>

I also noticed that the difference between one and the other is very small, you can try to make this check on controller before it is rendered.

$scope.newName = '';
if (contract.symbol === 'X')  $scope.newName = contract.name.concat([FAKE]);
else $scope.newName = contract.name;

Now in html

<a href="/token/{{ contract.contract_address }}" class="ellipsis mark title">{{ contract.symbol }} {{ contract.name ? ((contract.symbol ? '- ' : '') + newName ) : '' }}</a>

I hope I’ve helped :).