把动态字符串放入ng级

我有一些代码可以读取JSON数据，并且该数据用于呈现自定义表单。当我呈现文本输入时，我想向控件添加验证。这很简单，但我在处理从动态信息呈现验证HTML的正确方法时遇到了一些麻烦。把动态字符串放入ng级

这比显示更容易显示。所以这里是我的代码，你可以看到我使用自定义数据来渲染属性。（例如{{fl.fldBasic.fldLabel}}）

<div ng-class="{ 'has-error' : editForm.{{fl.fldBasic.fldLabel}}.$invalid && !editForm.{{fl.fldBasic.fldLabel}}.$pristine }"> 
    <input type="text" 
      class="form-control" 
      id="{{fl.fldBasic.fldLabel}}" 
      tabindex="{{$index}}" 
      ng-model="fl.dataValue" 
      ng-required="{{fl.fldAttr.attrRequired}}" 
      ng-readonly="{{fl.fldAttr.attrReadOnly}}" 
      ui-mask="{{fl.edit_Mask}}" 
      title="{{fl.fldAttr.attrHelp}}" 
      placeholder="" 
      required autofocus> 
    <div class="help-block" 
     ng-messages="editForm.{{fl.fldBasic.fldLabel}}.$error" 
     ng-if="editForm.{{fl.fldBasic.fldLabel}}.$touched"> 
     <p ng-message="required">This field is required</p> 
    </div> 
</div>

当我运行这一点，这就是正在由web浏览器渲染：

> <div ng-class="{ 'has-error' : editForm.Label002.$invalid &amp;&amp; 
> !editForm.Label002.$pristine }" class="ng-scope"> 
>  <input type="text" class="form-control ng-pristine ng-valid ng-not-empty ng-valid-required ng-touched" id="Label002" tabindex="1" 
> ng-model="fl.dataValue" ng-required="true" ng-readonly="false" 
> ui-mask="" title="This field contains the last name of the cardholder. 
> It can be up to 40 characters long." placeholder="" 
> required="required" autofocus=""> 
>  <!-- ngIf: editForm.{{fl.fldBasic.fldLabel}}.$touched --> </div>

如果你看看，你会看到ng级声明＆符号被呈现为& amp，而ng-如果在底部则逐字地渲染数据值。

我一直在玩弄试图用引号包起来的东西，但我找不到能使它全部工作的神奇组合。有关如何使这项工作的任何想法？

谢谢！

来源

2017-02-25 Todd Davis

请尝试使用函数。在控制器中声明一个函数，该函数将生成动态字符串并使用ng-class的该函数。这应该工作。

<div ng-class="{ 'has-error' : myHasErrorFunc(editForm, fl.fldBasic.fldLabel)}">

然后您应该在您的范围内声明功能myHasErrorFunc。

来源

2017-02-25 03:25:48 Vahid

这个例子对我的作品：

<div class="form-group" ng-class="{ 'has-error' : adForm.adName.$invalid && !adForm.adName.$pristine }"> 
    <label class="col-sm-3 control-label">{{ 'ad_title' | translate }}</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="adName" name="adName" ng-model="ad.name" required ng-pattern="/^[a-zA-Z0-9_\-\.\!\s]+$/" ng-maxlength="128" /> 
     <p ng-show="adForm.adName.$error.required && !adForm.adName.$pristine" class="help-block">{{ 'ad_title' | translate }} {{ 'isRequired' | translate }}</p> 
     <p ng-show="adForm.adName.$error.maxlength && !adForm.adName.$pristine" class="help-block">{{ 'error.validation.mustBeLessThan' | translate}} 128 {{ 'error.validation.charactersLong' | translate}}</p> 
     <p ng-show="adForm.adName.$invalid && !adForm.adName.$pristine" class="help-block">{{ 'Invalid' | translate }} {{ 'ad_title' | translate }} {{ 'error.validation.title' | translate}}</p> 
    </div> 
    <div class="form-group-required"></div> 
</div>

我使用的是引导和我使用不同的<p> HTML标记根据错误条件是什么在页面显示错误消息：

最大长度
需要
无效（正则表达式）

来源

2017-02-25 03:28:03 guilhebl

试试这个

<div ng-class="{ 'has-error' : checkError()">

在控制器

$scope.checkError(){ 
    //here you can return true or false in case of of form is invalid or some other conditions 


}

来源

2017-02-25 04:27:45

把动态字符串放入ng级

回答

相关问题