Setting UI-Select default value within a Smart Table

Question

Setting UI-Select default value within a Smart Table

I have an Angular based web project upon which I ran into an issue. I am loading data into a smart table. Within the smart table definition, I have a column defined as a ui-select (dropdown). My issue is when I load the row data. I cannot get the ui-select to default to the value returned from the database. For example, my smart table definition is as follows:

Col 1 Col 2 Col 3 Col 4

R1C1 R1C2 R1C3 R1C4 – Value 1

R2C1 R2C2 R2C3 R1C4 – Value 4

R3C1 R3C2 R3C3 R1C4 – Value 2

R4C1 R4C2 R4C3 R1C4 – Value 1

My data retrieval returns from Couchbase database as follows:

[
 {
  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
 }
]

I load the table as follows

<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>

In my attempts to load the C4 dropdown, I have performed the following:

1. used ui-option ng-selected = “C4”
2. used ui-option ng-selected = “row.data.filters.C4 = C4”
3. used ui-option 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. Rebuild the dG array into include C4-id and C4Name data
6. used rebuild dG array as data for attempts 1, 2, 3
7. in ui-select ng-selected similare to attempts 1, 2, 3

The above list is not all of the options tried. I tried so many different options that if I knew I was going to have this much difficulty, I would have saved them.

I know the ng-model for the ui-select must be loaded with the default value before the dropdown would show the value. My issue revolves around how to set the ng-model for the each row in the smart table.

I will appreciate any assistance in resolving this issue.

Answer 1

I resolved this issue by a replacing the ng-model expression to a location stored within my client controller. I preset the location in the client controller to the database returned value (dropdown structure) and the appropriate value display as the default value of the dropdown.

Additional information added 10/7/2016

After discovering my initial solution to the problem failed after adding the ability to sort the smart table, I searched for another solution. After several redesigns of data, data placement, and data structures, I believe I hit upon a viable solution. The solution appeared so simple, that I could not believe it would have worked. Instead of tracking the ng-model for the ui-select for the dropdown outside of the data array, I added it to the actual data returned. Since I was performing a RestAPI retrieval of the data from couchbase, I needed to place the data into an array of objects for the smart table. I just added additional fields to the array, set the various fields to the default value. Then I changed the ng-model to the new field within the array. After, I was able to sort the data and the default values stayed associated to the appropriate rows.