用于填充动态选择框AngularJS的自定义指令

时间:2015-06-22 16:06:50

标签: angularjs angularjs-directive angularjs-ng-options

我有以下控制器基本上调用http get服务并将数据分配给show_data范围变量

.controller('forms_controller', function($scope, Form) {

Form.get().then(function(data){
    $scope.show_data = data;
});


});

然后将scope.show_data推送到此视图..

<div ng-repeat="(key, value) in show_data | orderBy:'key' " >
<div ng-switch on="value.Type" >
    <div ng-switch-when="attributes" >
        <div ng-repeat="(key2, value2) in value | orderBy:'key' ">

            <div ng-switch-when="Date" >                            
                <label class="item item-input">
                    <span class="input-label">{{value2.Label}}</span>
                    <input identifier="{{value2.Identifier}}" type="date">
                </label>
            </div>

            <div ng-switch-when="Select" >
                <label class="item item-input item-select">
                    <div class="input-label">
                    {{value2.Label}}
                    </div>
                        <select codelist="{{value2.CodeList}}" identifier="{{value2.Identifier}}" >
                    </select>
                </label>
            </div>

        </div>
    </div>
</div>

它基本上根据输入类型检查数据,并根据数据吐出不同的表单元素。我的问题是我面临的是使用选择框...每个选择框都有一个id [在这种情况下的代码列表]到应该显示的ng-options但是,我首先要做另一个http获取在填充ng-options之前调用以获取此数据...
另请注意,每个表单可能有多个选择框。

我在考虑使用某种自定义指令来实现这一目标? 任何帮助将非常感谢:)
谢谢

1 个答案:

答案 0 :(得分:0)

您的问题是服务器向您发送了一个&#34;不完整的&#34;宾语。你需要做额外的获取请求才能完成&#34;你的对象。

所以这就是你应该做的:在你的控制器中,迭代你的对象并执行额外的get-requests,并将结果存储在你可以使用value2.items在html中调用的内容中。

您不必等待设置$scope.show_data,直到获取所有数据。只要附加信息可用,Angular的双向绑定就会同步html。

这样的事情应该有效。

var n = 0;
for (;n < data.length; n += 1) {
    var values = data[n].value
    var i = 0;
    for (;i < values.length; i += 1) {
        // GET based on values[i].CodeList
        $http.get(...)
        .success(function (data2) {
             values[i].items = data2
             // Retrieveable in HTML as value2.items
        });
    }
}