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

Question

我有以下控制器，它基本上调用 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>

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

我在考虑使用某种自定义指令来实现这一点？
任何帮助将不胜感激:)
谢谢

Answer 1

您的问题是服务器向您发送了一个 "incomplete" 对象。您需要对 "complete" 您的对象执行额外的获取请求。

所以这是你应该做的：在你的控制器中，迭代你的对象并执行额外的获取请求并将结果存储在你可以在你的 html 中调用的东西中 value2.items.

您不必等待设置 $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
        });
    }
}

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

Custom directive to populate dynamic select box AngularJS

angularjs

angularjs-directive

angularjs-ng-options