Question

设置UI - 在智能表中选择默认值

我有一个基于Angular的网络项目，我遇到了一个问题。我正在将数据加载到智能表中。在智能表定义中，我有一个列定义为ui-select（下拉列表）。我的问题是我加载行数据。我无法将ui-select默认为从数据库返回的值。例如，我的智能表定义如下：

Col 1 Col 2 Col 3 Col 4

R1C1 R1C2 R1C3 R1C4 - 值1

R2C1 R2C2 R2C3 R1C4 - 值4

R3C1 R3C2 R3C3 R1C4 - 值2

R4C1 R4C2 R4C3 R1C4 - 值1

我的数据检索从Couchbase数据库返回如下：

[
 {
  Datavalue1: C1,
  Datavalue2: C2,
  Datavalue1: C3,
  Datavalue2: C4-id
 },
 {
  Datavalue1: C1,
  Datavalue2: C2
  Datavalue1: C3,
  Datavalue2: C4-id
 },
 {
  Datavalue1: C1,
  Datavalue2: C2
  Datavalue1: C3,
  Datavalue2: C4-id
 },
 {
  Datavalue1: C1,
  Datavalue2: C2
  Datavalue1: C3,
  Datavalue2: C4-id
 }
]

我按如下方式加载表

<tr ng-repeat='row in dG' st-select-row="row" style="white-space: nowrap" st-select-mode="multiple">

    <td>{{ C1}}</td>
     <td>{{ C2 }}</td> 
     <td> {{ C3}} </td>
     <td>
     <ui-select ng-model="row.data.filters.C4" theme="bootstrap" name="C4Col" style="width:400px">
             <ui-select-match placeholder="Select C4"> {{ $select.selected.c4Name }}
             </ui-select-match>
              <ui-select-choices repeat="C4Array in C4Array | filter: $select.search" 
               style="position: relative;top: auto;left: auto; width: inherit">
               <span ng-bind-html="C4Array.C4Name| highlight: $select.search"></span>
              </ui-select-choices>
            </ui-select>
           </td>

在我尝试加载C4下拉列表时，我执行了以下操作：

使用了ui-option ng-selected =“C4”
使用了ui-option ng-selected =“row.data.filters.C4 = C4”
使用了ui-option ng-selected =“$ select.selected.c4Name = C4Name”
ui-select ng-model =＆＃34; row.data.filters.C4＆＃34;主题=＆＃34;自举＆＃34;命名=＆＃34; C4Col＆＃34;风格=＆＃34;宽度：400像素＆＃34; ng-selected =“C4”
将dG数组重建为包含C4-id和C4Name数据
使用rebuild dG数组作为尝试1,2,3的数据
在ui-select ng-selected similare中尝试1,2,3

以上列表并非所有尝试过的选项。我尝试了很多不同的选择，如果我知道我会遇到这么大的困难，我会拯救他们。

我知道ui-select的ng-model必须在下拉列表显示值之前加载默认值。我的问题围绕如何为智能表中的每一行设置ng-model。

我将非常感谢您解决此问题的任何帮助。

Answer 1

我通过将ng-model表达式替换为存储在客户端控制器中的位置来解决此问题。我将客户端控制器中的位置预设为数据库返回值（下拉结构），并将适当的值显示为下拉列表的默认值。

2016年10月7日新增的其他信息

在添加了对智能表进行排序的功能后，在发现问题的初始解决方案失败后，我搜索了另一个解决方案。在对数据，数据放置和数据结构进行了多次重新设计之后，我相信我找到了可行的解决方案。解决方案看起来很简单，我无法相信它会起作用。我没有跟踪数据阵列外部下拉列表的ui-select的ng-model，而是将其添加到返回的实际数据中。由于我正在从couchbase执行RestAPI数据检索，因此我需要将数据放入智能表的对象数组中。我刚刚在数组中添加了其他字段，将各个字段设置为默认值。然后我将ng-model更改为数组中的新字段。之后，我能够对数据进行排序，并且默认值保持与相应的行相关联。

设置UI - 在智能表

1 个答案: