如何替换离子页脚元素的文本内容？答案

【问题标题】：How to replace ionic footer elements' text contents?如何替换离子页脚元素的文本内容？
【发布时间】：2017-07-08 17:07:28
【问题描述】：

如果条件为真，我想将文本 Check{{product.name}} 替换为 Check{{user}}。

我花了几个小时，尝试了hidden, display:none, .hide() 等，但都没有奏效.. 我还尝试为check{{user}} 创建另一个<a> 块并在条件不成立时隐藏该块，但它也不能正常工作....

想知道是否有人可以帮忙！谢谢。

有我的代码：

html：

<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" > 
    <a href="link" id="newtest"> check {{product.name}}</a> 
</ion-footer-bar>

js:

if (user_name !=''){ 
    //change Check{{product.name}}" to "Check{{uesr}}"
};

【问题讨论】：

标签： javascript jquery html angularjs ionic-framework

【解决方案1】：

试试这个

<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" > 
<a href="link" id="newtest"> 
  <span ng-show="your_condition"> check {{product.name}} </span> 
  <span ng-show="!your_condition">Check{{uesr}}</span>
</a> 
</ion-footer-bar>

【讨论】：

您好 Saurabh，感谢您的回答。我添加如下，但它只显示：Check{{uesr}} 条件是否为真... check {{product.name}} span> 检查{{uesr}} & 检查 {{product.name }} 检查{{uesr}}

【解决方案2】：

如果只是文本替换，那么很容易。

$('ion-footer-bar > a').html('Check{{user}}');

【讨论】：

嗨 Haze，感谢您的回答，我已将代码放入我的状态，但它不起作用...
这个怎么样，$('a#newtest').html('Check{{user}}');。最后的手段，我不知道这是否对你有用。 :)

【解决方案3】：

听起来您的问题出在您的控制器内。当 ion-footer-bar 在内容之外时，范围不与页脚共享。确保使用 <div> 包装您的 html 并在其中定义一个控制器，然后在您的视图中执行条件逻辑。

<div ng-controller="mainCtrl">

    <ion-header-bar class="bar-stable">
      <h1 class="title">Header</h1>
    </ion-header-bar>

    <ion-nav-view>
      <ion-content>
        Your content here
      </ion-content>
    </ion-nav-view>

    <ion-footer-bar class="bar-positive">
       <span  ng-if="loggedUser!=user.id"> 
           <a href="link" id="newtest"> check {{product.name}}</a> 
       </span>
        <span  ng-if="loggedUser==user.id"> 
           <a href="link" id="newtest"> Check{{user}}</a> 
       </span>
    </ion-footer-bar> 

</div>

【讨论】：

【解决方案4】：

添加到第一个答案，你也可以使用

angular2 与*ngIf = (condition) 内或达到相同的结果

【讨论】：