使用ng-repeat和ngmodel的指令

时间:2015-08-07 15:02:28

标签: angularjs angularjs-ng-repeat angular-ngmodel angular-directive

我创建了一个指令来安装表单app,执行ngrepeat以从字段中获取信息并设置模板。

问题是当我尝试记录ngmodel资源时,我不知道该怎么办。

<field-create ng-repeat="field in grupo.fields" field="field" ng-model="item.grupos"></field-create>

指令:

.directive('fieldCreate', function($compile, $timeout) {

    var inputtpl    = '<md-input-container><label>{{field.title}}</label><input ng-model="item.grupo.fields.model"></md-input-container>';
    var textareatpl = '<md-input-container><label>{{field.title}}</label><textarea ng-model="item.grupo.fields.model" columns="1" md-maxlength="300"></textarea></md-input-container>';
    var checkboxtpl = '<md-checkbox ng-model="item.grupo.fields.model">{{field.title}}</md-checkbox>';

    var getTemplate = function(fieldType) {
        var template = '';

        switch(fieldType) {
            case 'input':
                template = inputtpl;
                break;
            case 'textarea':
                template = textareatpl;
                break;
            case 'checkbox':
                template = checkboxtpl;
                break;
        }
        return template;
    }

    var linker = function(scope, element, attrs) {
        element.html(getTemplate(scope.field.type));
        $timeout(function(){
            $compile(element.contents())(scope);
        });
    }

    return {
        restrict: "E",
        replace: true,
        require: 'ngModel',
        link: linker,
        scope: {
            field: '=',
            model: '=ngModel'
        }
    }

});

更新:

我有一个突破,但由于重复,只改变一个字段,我改变的任何字段..改变相同的模型:/

enter image description here

Plunker:http://plnkr.co/edit/S20jluwSyXncp74KyTn9?p=preview

更新: 我设法做了我想要的,解决方案是使用形成为ngmodel的KEY。

现在,工作包括检查此字段是否唯一,但可能会产生问题。

0 个答案:

没有答案