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

Posted 2023-05-09

【中文标题】如何替换离子页脚元素的文本内容？

【英文标题】：How to replace ionic footer elements' text contents?

【发布时间】：2017-07-08 17:07:28

【问题描述】：

如果条件为真，我想将文本 Checkproduct.name 替换为 Checkuser。

我花了几个小时，尝试了hidden, display:none, .hide() 等，但都没有奏效.. 我还尝试为checkuser 创建另一个<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 Checkproduct.name" to "Checkuesr"
; 

【参考方案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">Checkuesr</span>
</a> 
</ion-footer-bar>

【讨论】：

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

【参考方案2】：

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

$('ion-footer-bar > a').html('Checkuser');

【讨论】：

嗨 Haze，感谢您的回答，我已将代码放入我的状态，但它不起作用...

这个怎么样，$('a#newtest').html('Checkuser');。最后的手段，我不知道这是否对你有用。 :)

【参考方案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"> Checkuser</a> 
       </span>
    </ion-footer-bar> 

</div>

【参考方案4】：

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

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