Question

我有一个页面，其中包含一个表格，该表格包含可变数量的记录（可能达到100条或更多记录），这些记录是使用ng-repeat为正文部分构建的。

在每条记录中，有几个输入字段，其中一些是select类型。这些选择字段每个包含近100个选项，最初使用ng-repeat构建，以生成值数组（$scope变量）中的选项。

除了页面显示需要几秒钟之外，这仍然有效（我想是因为AngularJS必须为所有选项的所有选项创建数千条HTML记录）。如果我注释掉生成选择选项的部分，页面会立即完成加载（显示包含所有字段的数十条记录，但select元素不包含任何选项）。

我改变了方法并将每个选择的构建延迟到用户点击它的时刻。以这种方式，构建所有选择所需的总时间是分布式的并且对于用户来说是不可察觉的（即，当点击最初为空的选择时，其构造/群体花费几分之一秒）。我正在使用包含选项的所有HTML声明的字符串更新元素的innerHTML。

我的问题是第一次点击时显示的列表是 NOT ，但仅在第二次点击时显示。我猜这是因为下拉列表没有完全构建列表。

另外，我检查了使用ng-options的可能性，但是立即将其丢弃，因为它还需要预先设置所有选择的列表，每个选项都有selected值。

任何人都可以建议我如何强制下拉列表等待选项列表完全构建？我还可以使用其他替代方法吗？（如果这种方法不需要额外的库，那将是最好的）。一个简单的例子将受到高度赞赏。

感谢。

修改

我在这里添加了一个函数的代码，用于填充表中给定记录的一个选择（p_Par用于选择正确的记录）：

$scope.Build_Options_List_Test_Method = function (p_Par) {

    var l_Select_Element_Name = "Test_Method_Select_" + p_Par ;
    var l_Inner_HTML          = "" ;

    // A select element with a value received from the DB but without options will have a length of 1. If no value from the DB, the length would be 0.
    // As such, if the length of the current select is > 1, the list of options had been deployed already and hence need not to be built.
    if(document.getElementById(l_Select_Element_Name).length > 1) {
        return ;
    }

    // List of options need to be built...

    for (var i = 0 ; i < $rootScope.All_Collections.Parameters_Test_Methods.length ; i++) {
        l_Inner_HTML = l_Inner_HTML                                                                                                   + 
                       '<option ng-selected="false" value="'                                                                          + 
                       $rootScope.All_Collections.Parameters_Test_Methods[i].Value                                                    + 
                       '" title="' + $rootScope.All_Collections.Parameters_Test_Methods[i].Test_Method_Name + ' | '                   + 
                                     $rootScope.All_Collections.Parameters_Test_Methods[i].Method_Internal_Name                       +
                       '" class="ng-binding ng-scope">' + $rootScope.All_Collections.Parameters_Test_Methods[i].Value + '</option>\n'   ;
    }

    document.getElementById(l_Select_Element_Name).innerHTML = l_Inner_HTML ;

}

注意：此代码尚未将selected子句添加到任何选项中。

AngujarJS - 在运行时填充的选择元素在第一次单击时不显示选项

0 个答案: