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

Question

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

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

列1列2列3列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下拉菜单时，我执行了以下操作：

1. 用过的ui-option ng-selected =“ C4”
2. 所使用的ui选项ng-selected =“ row.data.filters.C4 = C4”
3. 使用的ui选项ng-selected =“ $ select.selected.c4Name = C4Name”
4. ui-select ng-model =“ row.data.filters.C4” theme =“ bootstrap” name =“ C4Col” style =“ width：400px” ng-selected =“ C4”
5. 将dG阵列重建为包含C4-id和C4Name数据
6. 使用重建dG阵列作为尝试1、2、3的数据
7. 在ui-select ng-selected中类似于尝试1、2、3

上面列出的不是所有尝试过的选项。 我尝试了很多不同的选择，以至于如果我知道自己将面临如此巨大的困难，那我将可以挽救他们。

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

感谢您为解决此问题提供的任何帮助。

Answer 1

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

添加附加信息10/7/2016

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