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:
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.