angularjs傳遞參數通過指令和NG-重複

這裏的工作plunker： http://plnkr.co/edit/RTrdsLY8ONoeDLPYSFJi?p=preview

但磁場相互連接在一起。

，當你在DOM：

<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="fieldName" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required=""> 
                                 ^^^^^^^^^^

當然

！所有的都有name =「fieldName」！

但是爲什麼！？它應該是first_name，last_name和age！

是的，有在formField.html模板錯誤：

<input class="form-control" type="{{fieldType}}" name="fieldName" ng-model="fieldName" ng-minlength=3 ng-maxlength=20 required/> 
                 ^^^^^^^^^^^

因此，讓我們將它變成{{字段名}}。因此，所有的form.fieldName ...都會出現在表單{{fieldName}}中。

那麼，哪裏的紅框？

讓我們看看DOM -

<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="first_name" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required="">

的名字就可以了，但現在有錯不工作...

來源

2013-12-18 Tomasz Brzezina

我認爲，有一些問題納克像她一樣的模特兒e http://stackoverflow.com/questions/13714884/difficulty-with-ng-model-ng-repeat-and-inputs - 但我不能得到它的工作 –

更新：可以使用這樣的函數從模型獲取您的PARAMS。（accroding你的數據結構）

另一個分叉plunker：http://plnkr.co/edit/mdKBoEffoUo2ilH7Jd3L?p=preview

$scope.getModels = function(items) { 
    var params = {}; 

    if (angular.isArray(items)) { 
    for (var i = 0; i < items.length; i++) { 
     var item = items[i]; 

     if(angular.isArray(item.fields)) { 
     for (var j = 0; j < item.fields.length; j++) { 
      var field = item.fields[j]; 
      params[field.id] = field.model; 
     } 
     } 
    } 
    } 

    alert(JSON.stringify(params, '', 4)); 
};

由於動態輸入名稱尚未實施（Relatived PR here），我插入驗證嵌套ng-form。因此，我認爲你必須使用ngModel自己管理表單提交。

檢查這裏的分叉〔實施例：http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=preview

模板：

<div class="form-group" ng-form="form" ng-class="{true: 'has-error', false: 'has-success'}[form.fieldName.$invalid]"> 
    <label class="control-label col-sm-2" for="fieldName">{{fieldLabel}}</label> 
    <div class="col-sm-6"> 
     <input class="form-control" type="{{fieldType}}" placeholder="enter valid name" name="fieldName" ng-model="fieldModel" ng-minlength=3 ng-maxlength=20 required/> 
     <span class="help-block"> 
     <span ng-show="form.fieldName.$error.required">Required field</span> 
     <span ng-show="form.fieldName.$error.minlength">Too few chars - min is (6)</span> 
     <span ng-show="form.fieldName.$error.maxlength">Too much chars - max is (20)</span> 
     &nbsp; 
     </span> 
    </div> 
</div>

HTML：

<form-field ng-repeat="field in tabItem.fields" ng-model='field.model' 
    field-type="field.type" field-name='field.id' field-label='field.label'> 
</form-field>

JS：

KPNDirectives.directive("formField", function() { 
    return { 
     restrict: 'E', 
     scope: { 
     fieldModel: '=ngModel', 
     fieldType: '=', 
     fieldLabel: '=', 
     fieldName: '=' 
     }, 
     templateUrl: 'formField.html' 
    }; 
});

來源

2013-12-20 08:36:21

如何使用字段。 model/ngModel in controller？ –

@SledgehammerPL請檢查我的更新。我希望能幫助你。 –

很好，但非常複雜。但是有可能爲模型使用其他範圍數組？動態創建？ $ scope.models = {'first_name'：''，'last_name'：''}等 –

我不知道，如果你的NG級指令的使用是對。先把類名稱放在「變量」後面。嘗試使用：

ng-class="'my-class-name': true"

來源

2013-12-18 16:50:16

我根本不使用ng-class！ –

如果您考慮ng-class =「{true：'has-error'，false：'has-success'} {form。{{fieldName}}。$ invalid] - 它是正確的語法 –

angularjs傳遞參數通過指令和NG-重複

回答

相關問題