把動態字符串放入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級

回答

相關問題