AngularJS來自數據的條件屬性

我正在創建一個AngularJS應用程序，以便從定義數據結構的泛型中動態地呈現表單。所以表單細節（包括所有驗證規則，數據類型等）在數據庫中定義，單個AngularController應該「繪製」表單。AngularJS來自數據的條件屬性

有關背景 - 這裏是defiintion的大致結構：

Form 
    Sections 
     Fields

它工作正常 - 但添加屬性基礎上，定義窗體上的<input>元素時，我有一個問題。舉例來說，假設field1需要最小和最大長度驗證，但是字段2沒有。這是通過將ng-minlength和ng-maxlength屬性添加到field1的輸入元素並將其添加到field2的輸入元素來實現的。

一些谷歌搜索引起最近刪除的ng-attr指令可能是一種溶劑 - 但自從它被刪除後，我卡住了？

<ng-form name="frmTSFApp"> 

    <uib-tabset> 

    <uib-tab ng-repeat="aSection in tsf3fd.section track by aSection.ukey" 
      index="aSection.display_order" 
      heading="{{aSection.display_label}}"> 

     <ng-form name="frmSection{{aSection.display_order}}"> 


     <div ng-repeat="aField in aSection.fields track by aField.ukey" 
       class="form-group" 
       ng-class="getFormClass(frmSection{{aSection.display_order}}[aField.data_name],aField)"> 

      <label class="control-label">{{aField.field_label}}</label> 

       <input ng-required="{{aField.require_kind == 'R'}}" 
         type="text" 
         class="form-control" 
         ng-model="tsf3fd.model[aField.data_name]" 
         name="{{aField.data_name}}" /> 

     </ng-form> 

    </uib-tab> 

    </uib-tabset> 
</ng-form>

以上片段是我們用什麼來渲染表單 - 所以NG要求的屬性很好地工作，因爲它總是存在的，它的值從下面的表達式來解決。對於每個領域，我們「知道」我們需要添加的所有驗證（ng-minlength或ng-pattern等等），但不知道如何做到這一點？

在僞代碼，我想是這樣的「內：輸入元素：

if (aField.validations.minmax) 
{ 
    ng-minlength = "{aField.validations.minmax.min}" 
    ng-maxlength = "{aField.validations.minmax.max}" 
}

希望我的解釋是有道理的

我開始懷疑我的做法 - 這似乎是一個簡單的方法是通過類似XSLT的外部數據從外部呈現「字面」表單標記，我們已經完成了這一工作，並且工作正常，但我認爲直接從數據中工作會變得很「酷」，並且會簡化這個過程。

反正- 任何幫助，將不勝感激。

來源

2016-03-17 user1547414

如果所有的都是'type = text'（就像你的代碼中那樣），爲什麼不簡單地添加所有的驗證呢？角將忽略具有空值的那些。 – Daniel

你可以使用：

<input 
    ng-required="{{aField.require_kind == 'R'}}" 
    ng-minlength="{{aField.validations.minmax ? aField.validations.minmax.min : '' }}" 
    ng-maxlength="{{aField.validations.minmax ? aField.validations.minmax.max : '' }}" 
    type="text" 
    class="form-control" 
    ng-model="tsf3fd.model[aField.data_name]" 
    name="{{aField.data_name}}" />

設置ng-minlength或ng-maxlength空字符串有相同的效果就不一一說明。

來源

2016-03-17 07:06:09 p1100i

這就是完美！將測試像這樣 - 但我認爲它會工作！謝謝。 – user1547414

AngularJS來自數據的條件屬性

回答

相關問題