【问题标题】:Form fields / Placeholder and value表单字段/占位符和值
【发布时间】:2017-08-23 11:06:24
【问题描述】:

如果条件为真,我想更改此表单字段。

<input type="email"
  name="UserEmail"
  id="UserEmail"
  class="form-control"
  ng-class="{'invalid-signup': signUpForm.UserEmail.$invalid && signUpForm.UserEmail.$dirty, 'valid-signup': signUpForm.UserEmail.$valid && signUpForm.UserEmail.$dirty}"
  placeholder="Primary contact email."
  ng-required="true"
  ng-maxlength="30"
  ng-minlength="5"
  ng-model="signUpModel.UserEmail"/>
 <div ng-show="signUpForm.UserEmail.$dirty && signUpForm.UserEmail.$invalid">
  <p ng-show="signUpForm.UserEmail.$error.required">Email is required.</p>
  <p ng-show="signUpForm.UserEmail.$error.pattern">Email is not valid.</p>
  <p ng-show="signUpForm.UserEmail.$error.minlength">Email is too short, min 5 characters.</p>
  <p ng-show="signUpForm.UserEmail.$error.maxlength">Email is too long, max 30 characters.</p>
</div>

所以我有一个标志变量,如果这是真的,我想将字段占位符和值更改为某种东西。

$scope.isGoogleLoginWorking = true;

有没有办法做到这一点。

感谢您的建议。

【问题讨论】:

    标签: javascript html angularjs


    【解决方案1】:

    你可以使用三元运算符

    <input type="email"
      name="UserEmail"
      id="UserEmail"
      class="form-control"
      ng-class="{'invalid-signup': signUpForm.UserEmail.$invalid && signUpForm.UserEmail.$dirty, 'valid-signup': signUpForm.UserEmail.$valid && signUpForm.UserEmail.$dirty}"
      placeholder="{{isGoogleLoginWorking?'Primary contact email.':'Something else'}}"
      ng-required="true"
      ng-maxlength="30"
      ng-minlength="5"
      ng-model="signUpModel.UserEmail" ng-value="isGoogleLoginWorking?signUpModel.UserEmail:'Something else'"/>
    

    【讨论】:

    • 有没有其他方法可以使用 java 脚本来完成,因为我需要包含另一个条件,我会变得复杂。
    • 您可以调用一个函数并在您的函数中进行计算。您的具体要求是什么?
    • 我想通过 id 调用字段并在函数内部分配值,例如 getTagById("something")。因为稍后我将包括 Facebook , Microsoft 登录,所以我不希望用户直接登录我想显示用户数据,然后如果他很高兴按注册,这就是我需要占位符和价值。
    • 然后您可以编写一个自定义指令,通过 id 捕获所需字段并操作其占位符和值
    • 能否请您发送并举例说明。
    猜你喜欢
    • 1970-01-01
    • 2020-04-09
    • 1970-01-01
    • 2014-04-11
    • 2022-01-01
    • 2017-10-23
    • 2020-11-29
    • 2014-08-27
    • 1970-01-01
    相关资源
    最近更新 更多