我需要在某些情况下更改占位符的文本（如 If 语句）答案

【问题标题】：I need to change the placeholder's text for certain situation(An If Statement like)我需要在某些情况下更改占位符的文本（如 If 语句）
【发布时间】：2019-07-03 13:39:38
【问题描述】：

我有文本输入，目前是占位符 = 输入 4 位数字。

假设我有一个名为“test”的布尔变量。

我正在尝试做 => 如果 test=true placeholder= 输入 6 位数字

else test= false 占位符 = 输入 4 位数字

实际上 if 条件不是基于 bool 变量，但如果我理解这一点。我可以解决原始问题。

<div class="left small-8 columns">
  <input 
    class="form-control" 
    id="vm_pin"
    whole-number
    maxlength="15"
    data-ng-readonly="is_restricted_user"
    data-ng-model="subscriber.vm_pin" 
    type="text" 
    placeholder="{{'6_digits' | xlat}}"                                                      
    tooltip="{{'vm_pin' | xlat_tooltip}}" 
  />
</div>

在相关的.json文件中

"4_digits":"4-15"

"6_digits":"6-15"

【问题讨论】：

您是从这个 json 文件中读取一些数据，然后确定要显示的内容吗？
是的，就是这样，{'6_digits' | xlat} 它查找“6_digits”的相关 json 文件并将其放入占位符

标签： html json angular

【解决方案1】：

解决方案 1 你可以做的是使用[placeholder]="placeholder" 并在你的组件中应用测试。

在您的组件中：

get placeholder(){
 //YOUR TEST
 // test = your logic.
 return test ? 'Enter 6 digits': 'Enter 4 digits'
}

解决方案 2

直接在您的模板中：

<div class="left small-8 columns">
  <input
    class="form-control" 
    id="vm_pin"
    whole-number
    maxlength="15"
    data-ng-readonly="is_restricted_user"
    data-ng-model="subscriber.vm_pin" 
    type="text" 
    [placeholder]="test ? 'Enter 4 digit' : 'Enter 6 digit')"                                                      
    tooltip="{{'vm_pin' | xlat_tooltip}}" 
  />
</div>

在你的组件中：

test(){
  // your logic to return the wanted result
}

注意：[placeholder]="variable" 优于 placeholder="{{variable}}"

【讨论】：

请注意，文本是从文件中获取的，因此您无法绑定道具，因为您无法对其使用插值
你不能在你的组件中import * as data from './file.json'; 吗？然后使用变量data输出你想要的？

【解决方案2】：

试试这个方法

<input class="form-control" 
       id="vm_pin" 
       whole-number maxlength="15" 
       data-ng-readonly="is_restricted_user" 
       data-ng-model="subscriber.vm_pin" 
       type="text" 
       ng-attr-placeholder="{{test && '6_digits' || '4_digits' | xlat}}"
       tooltip="{{'vm_pin' | xlat_tooltip}}"
/>

【讨论】：

有道理，但我应该在哪里写我的测试函数？
A.Sky，在您拥有 bool 变量的同一位置的 component.ts 文件类中。

【解决方案3】：

<input class="form-control" id="vm_pin" whole-number maxlength="15" data-ng-readonly="is_restricted_user" data-ng-model="subscriber.vm_pin" type="text" [placeholder]="check_condition ? '6-15 digits' : '4-15 digits')"
                                                             tooltip="{{'vm_pin' | xlat_tooltip}}" />

在我的js文件中我在下面写了这个函数

function check_condition(){

    if(currentLocation.includes("172")){
        return true;  //or should I use [return '4-15 digits']
    }
    else
        return false;

}

但我看不到任何占位符

【讨论】：

【解决方案4】：

我在相关的js文件中添加了这个

$scope.min_vm_pin_choice = $filter("xlat")(decide_min_vm_pin_for_placeholder());

并像这样更改了html端

placeholder="{{min_vm_pin_choice}}"

我写了一个函数来改变 min_vm_pin 的值，它工作得很好感谢您的想法

【讨论】：