I am currently utilizing Angular.js version 1.3.4 and implementing ui-select within my project.
My challenge lies in the process of binding data back to the ui-select component and a textbox after saving the information to the database successfully. Even after modifying the JSON data retrieved from the database, I encounter difficulties with this task.
The JSON structure obtained from the database:
{
"input1":{
"set1":{
"source":"uat1",
"value":"value1"
},
"set2":{
"source":"uat",
"value":"value2",
"options":[
{
"name":"option1"
},
{
"name":"option2"
}
]
}
},
"input2":{
"set3":{
"source":"uat1",
"value":"value3"
},
"set4":{
"source":"uat",
"value":"value4",
"options":[
{
"name":"option3"
},
{
"name":"option4"
}
]
}
}
}
Below is an excerpt from my directive attempting to bind back the data:
<div class="form-group" ng-repeat="(name, set) in sets">
<label>{{name}}</label>
<ui-select name="{{inputName + $index}}" ng-model="set.value" theme="bootstrap" ng-if="set.source == 'uat'">
<ui-select-match placeholder="Set">{{set.value.name}}</ui-select-match>
<ui-select-choices repeat="ds in set.options | filter: $select.search track by $index">
<div ng-bind-html="ds.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<input type="text" ng-if="set.source == 'uat1'" name="{{inputName + $index}}" ng-model="set.value" />
</div>
In the above code snippet, while the options display correctly in the ui-select, the issue arises with the displayed values. The selected values do not appear in the ui-select, and the textbox remains empty as well.
Based on the model 'ng-model = 'set.value' assigned to each control, I expected the binding to function properly, but it seems something is missing in the JSON structure. Any guidance on identifying the missing element would be greatly appreciated.
Thank you.