0

Bom dia a todos,

Estou com um determinado problema, se fosse em Javascript puro eu teria feito utilizando if e else sem problemas, como fiz em outro arquivo e funcionou!

Basicamente o arquivo HTML (com 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>

O que desejo basicamente é fazer uma verificação se contract.symbol for igual a X que ele retorne algo como:

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

Senão, ele retorna a linha normal:

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

Alguém sabe como fazer isto? Sou zero a esquerda com Angular e preciso entregar isso imediatamente.

Tentei usar tags

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

Mas não funcionou.

Obrigado!

1 Resposta 1

1

Olá, Se eu entendi bem, você quer mostrar um conteúdo e esconder outro de acordo com uma sentença. Com angularjs há algumas maneiras de fazer isto, vou mostrar algumas:

  • ngIf

utilizando a diretiva ng-if você pode criar uma tag para ser renderizada se o retorno da condição for true e uma tag para o retorno for false ex:

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

Você pode utilizar do mesmo efeito do ngIf em duas diretivas diferentes:

<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>

porem acredito que a primeira opção, utilizando o ngIf, seja mais simples.

Para o caso que você apresentou ficaria algo como:

<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>

Percebi também que a diferença entre um e outro é bem pequena, você pode tentar fazer esta verificação no controller antes da mesma ser renderizada.

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

Agora no html

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

Espero ter ajudado :).

1
  • Ajudou demais, utilizei a sua opção do: nf-if! Muito obrigado Matheus Commented 5/09/2018 às 12:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .