0

現在の状況: ディレクティブによって動的に作成されるフォーム フィールドがあります。タイプの 1 つにラジオ ボタンがあります。

目標: ページの読み込み時に、これらの要素の値を定義済みのスコープにバインドする必要があります。これは他のフィールド タイプでは正しく機能しますが、$parent.model がオプションと正確に一致しているにもかかわらず、ラジオ ボタンでは正しく機能しません。

制約: コードの制限により、ディレクティブの ng-model と ng-value は変更できません。ラジオボタンのモデルをオブジェクトにバインドできることを知っています。証拠としてこれを参照してください: http://plnkr.co/edit/OnHXect37Phij9VAB0ET?p=preview

コントローラー:

function MyCtrl($scope) {
    //defines the field types
    $scope.formFields = [
        {
        "fieldName": "Your Name",
        "uniqueId": "your_name_0",
        "fieldType": "text"
        },
        {
        "fieldName": "Description",
        "uniqueId": "description_1",
        "fieldType": "textarea"
        },
        {
         "fieldName": "Favorite Color",
        "uniqueId": "favorite_color_2",
        "fieldType": "radio"
        "fieldTypeOptionsArray":[
            {
                "formFieldId":"favorite_color_2",
                "optionId":"favorite_color_2_0",
                "optionValue":"yellow"

            },
            {
                "formFieldId":"favorite_color_2",
                "optionId":"favorite_color_2_1",
                "optionValue":"blue"

            }
            ] 
        }
    ];

    //values to bind to the model
    $scope.output={
        "your_name_0":"Bob",
        "description_1":"I am a developer",
        "favorite_color_2":
        {
            "optionValue":"yellow",
            "formFieldId":"favorite_color_2",
            "optionId":"favorite_color_2_0"
        }
    };
};

指令:

myApp.directive("formField",function($compile){
    var templates = {
        textTemplate:'<div class="form-group"><label for="{{content.uniqueId}}" >{{content.fieldName}}</label><input type="text" ng-model="model" name="{{content.uniqueId}}" class="form-control" id="{{content.uniqueId}}"/> </div><br>',
        textareaTemplate:'<div class="form-group"><label for="{{content.uniqueId}}" >{{content.fieldName}}</label> <textarea ng-model="model" name="{{content.uniqueId}}" id="{{content.uniqueId}}"  class="form-control"></textarea> </div>',
        radioTemplate : '<div class="form-group"><label>{{content.fieldName}}</label><div class=""><div class="radio" ng-repeat="option in content.fieldTypeOptionsArray"><label><input type="radio" name="{{content.uniqueId}}" ng-value="option" id="{{option.optionId}}" ng-model="$parent.model">{{option.optionValue}}</label></div></div></div>',
    };

    var getTemplate = function(content, attrs){
        var template = {};
        template = templates[content.fieldType+"Template"];
        if(typeof template != 'undefined' && template != null) {
                return template;
            }
            else {
                return '';
            }
    };


    var linker = function(scope, element, attrs){        
        element.html(getTemplate(scope.content, attrs)).show();        
        $compile(element.contents())(scope);
    }

    return {
        restrict:"E",        
        replace:true,        
        link:linker,
        scope:{
            content:'=',
            model:'=?'
        }
    };
});

ここにJSFiddleがあります： http://jsfiddle.net/scheedalla/d2jzmmd7/

しばらく立ち往生していて、問題の根本を理解できません。ネストされたオブジェクトであるか、ディレクティブ内にあるために何か関係があります。どんな助けも役に立ちます。さらに説明が必要な場合はお知らせください。ありがとう！！

4

2 に答える 2

0

解決策を見つけました。これをコントローラーに追加しました。$scope.output[favorite_color_2] を $scope.formFields の同等の値にマップすると、機能しました。この背後にある理由は、ng-repeat 内のアイテムはその親スコープ内のものにしかマップできないためです。この場合、$scope.formFields. 

angular.forEach($scope.output, function(value,key){        
        for(var f=0;f<$scope.formFields.length;f++){
            if(key == $scope.formFields[f].uniqueId){
            if($scope.formFields[f].fieldType == 'radio'){
                console.log($scope.formFields[f].fieldTypeOptionsArray.length);
                for (var z=0;z<$scope.formFields[f].fieldTypeOptionsArray.length;z++){
                    if($scope.formFields[f].fieldTypeOptionsArray[z].optionValue == value.optionValue){
                 $scope.output[key]=$scope.formFields[f].fieldTypeOptionsArray[z];                    
                    }

                }
            }
        }
        }
    });

更新された JSFiddle: http://jsfiddle.net/scheedalla/d2jzmmd7/17/

于 2015-09-21T18:51:51.043 に答える
0

オプション オブジェクト全体ではなく、ng-value と ng-model をオプションの値に変更すると機能するようです。

前後：

<input type="radio" name="{{content.uniqueId}}" ng-value="option" id="{{option.optionId}}" ng-model="$parent.model" >

<input type="radio" name="{{content.uniqueId}}" ng-value="option.optionValue" id="{{option.optionId}}" ng-model="model.optionValue"

http://jsfiddle.net/txbtpLgd/1/

于 2015-09-18T21:25:21.927 に答える