AngularJS NG-Repeat Select and set selected on page load? - angularjs

Question

I am generating a grid thru Angular and each row will have a dropdown. I want the dropdown to populate with data from the server which is working but during page load, it needs to set the selected item of each dropdown to the value of the property it's bound to. Simple example below...
Class CategoryField
ID
Name
CategoryID = 2
Select
Option1 text=Category A value=1
Option2 text=Category B value=2 <--- This item should be selected on load.
The code i have appears to have a selected attribute on an item in each dropdown from page source but the dropdown is loading and selecting the blank item angular adds. Code below for grid...UPDATED CODE BELOW
<div ng-app="CategoryFieldsApp">
Search:<input ng-model="search" type="text" placeholder="Search" />
#using (Html.BeginForm("CategoryFields", "Maintenance", FormMethod.Post))
{
<div ng-controller="CategoryFieldsCtrl">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th width="200">Category</th>
<th ng-click="sort('Name')" width="200">Name</th>
<th width="150">Active</th>
</tr>
</thead>
<tbody id="CategoryFieldGrid">
<tr dir-paginate="categoryField in categoryFields|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<td>
<input type="hidden" name="CategoryFields[{{$index}}].CategoryFieldID" ng-model="categoryField.CategoryFieldID" />
</td>
<td>
<input class="hdnCategoryID" type="hidden" name="CategoryFields[{{$index}}].CategoryID" />
<select ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select>
</td>
<td>
<input type="text" name="CategoryFields[{{$index}}].Name" ng-model="categoryField.Name" />
</td>
<td>
<input type="checkbox" class="active checkBox checkbox-inline" value="{{categoryField.Active}}" ng-model="categoryField.Active" name="CategoryFields[{{$index}}].Active" />
</td>
<td>
<input type="button" ng-click="remove($index)" value="Remove" />
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="5"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
<br />
<a class="btn btn-default" ng-click="add()">Add Category Field</a>
<input class="btn-primary btn-sm" type="submit" value="Save" />
</div>
}
<script>
var App = angular.module('CategoryFieldsApp', ['angularUtils.directives.dirPagination']).controller('CategoryFieldsCtrl', function ($scope, $http) {
$http.get("#Url.Action("GetCategoryFields", "Maintenance")").success(function (response) {
$scope.categoryFields = response; //ajax request to fetch data into $scope.data
});
$http.get("#Url.Action("GetCategories", "Maintenance")").success(function (response) {
$scope.categories = response; //ajax request to fetch data into $scope.data
});
$scope.sort = function (keyname) {
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
$scope.remove = function (index) {
$scope.categoryFields.splice(index, 1);
};
$scope.add = function () {
$scope.categoryFields.push({
CategoryFieldID: 0,
CategoryID: 0,
Name: '',
Active: true,
ShowRemove: true
});
};
});
//$(document).ready(function () {
// $('#CategoryFieldGrid tr').each(function (i, row) {
// var categoryID = $(row).find('.hdnCategoryID').val();
// console.log(categoryID);
// $(row).find('.ddlCategories').val(categoryID);
// });
// $('.ddlCategories').on('change', function (e) {
// var hidden = $(e.target).closest('tr').find('.hdnCategoryID');
// $(hidden).val($(e.target).closest('tr').find('.ddlCategories').val());
// });
//});

Answer 1

Have you considered using ng-options? It could be used to replace the explicit definition of your options:
<select ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select>
if you break down the expression we pass to ng-options, we're setting the value of the selected item to the CategoryID property, the visible name of each option to the category Name property, and we're passing in all the categories defined $scope.categories as options:
"category.CategoryID as category.Name for category in categories"
Here's a working example I put together: http://plnkr.co/edit/CXZaUYfqcIv7PbeUrT9j?p=preview

Answer 2

I was able to figure out the other side of the bindings so that the mvc model was updated for post back. I simply created a hidden field that was bound to the same property. When angular's ng-model updates, it updated the value of the hidden field also. Below is the syntax for those who needs it.
<input class="hdnCategoryFieldID" type="hidden" name="CategoryFieldApprovers[{{$index}}].CategoryFieldID" value="{{categoryFieldApprover.CategoryFieldID}}" />
<select ng-model="categoryFieldApprover.CategoryFieldID" ng-options="categoryField.CategoryFieldID as categoryField.Name for categoryField in categoryFields"></select>