I am currently facing a challenge with rendering a form on a page using ng-repeat, where the data for this form is dynamically fetched from a request. Within this data, there is a nested array called "categories" which contains IDs. I want to display the names corresponding to these IDs on the form instead of the IDs themselves. Another request returns an array with names associated with these IDs. How can I map the key-value pairs from one variable to another in order to display the list of names on the page?
You can find my problem on this plunker. Any help would be greatly appreciated, thank you in advance.
Here is the HTML code of my form:
<form style="padding: 15px" ng-submit="submitForm(rowData)">
<div class="form-group row">
<div ng-repeat="(key, value) in rowData">
<div ng-if="key | id">
<label class="col-sm-6">{{key | makeUppercase}}</label>
<div class=" col-sm-6">
<input class="form-control rowValue"
id="rowData[key]"
ng-if="!isObject(value)"
type="text"
ng-model="rowData[key]"/>
<span class="form-control rowValue"
id="categories"
ng-if="isObject(value) && key == 'categories'"
ng-model="rowData.categories">
{{rowData.categories}}
</span>
</div>
</div>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-default"
ng-if="rowData">Save</button>
<button type="button" class="btn btn-default" ng-if="rowData"
ng-click="cancelForm()">Cancel</button>
</div>
</form>