Question

我正在为表单控件创建指令，有一个修复json，其中包含所有可能的问题和选项。

HTML

<text-control-dir data="que.QuestionData" default="{{[_attributename]}}"></text-control-dir>

controlDirective.js

(function () {
    "use strict";

    angular
            .module("autoQuote")
            .directive('textControlDir', [textControlDir])
            .directive('selectControlDir', [selectControlDir])
            .directive('radioControlDir', [radioControlDir])
            .directive('hiddenControlDir', [hiddenControlDir]);

    function textControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: { 
                data: '=data'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><input type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' value='' >"
            ,
            link: function (scope, element, attrs)
            {
                //console.log(scope.data);
            }
        };
    }

    function selectControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: { 
                data: '=data',
                default: '=default'
            },
            template: ""
            ,
            link: function (scope, element, attrs)
            {
                consoile.log('link data');
                console.log(scope.default);
            }
        };
    }

    function radioControlDir()
    {
        console.log('here in radio directive');
        return {
            transclude: true,
            template: "<h1>Made by a radio directive!</h1>"
        };
    }

    function hiddenControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: { 
                data: '=data'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><input type='hidden' name='{{data._attributeName}}' id='{{data._attributeName}}' value='' >"
            ,
            link: function (scope, element, attrs)
            {
                //console.log(scope.data);
            }
        };
    }

}());

我没有得到如何循环创建选择选项。

Answer 1

在您的模板ng-repeat中，您必须使用in代替as：

template: "<div ng-transclude></div><label>{{data._text}} </label><select type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' >\n\
<option ng-repeat='ans in data.QuestionData._answerOptions'>{{ans._promptText}}</option></select>",

Your updated plnkr.

Answer 2

这是一个工作的掠夺者 http://plnkr.co/edit/bc7cii5gkyNhhT4NS3uv?p=preview

最好使用ngOptions指令，因为它更快！

避免使用带有“请选择”标签的选项 - 请查看我的示例。

Angular js：如何在指令中使用循环

2 个答案: