I'm in the process of creating a form for entering new service requests, as well as displaying and editing existing ones. One part of this form includes a list of labeled check-boxes that represent different countries. When an existing request is displayed using this form, I need to compare each country check-box with a list of initially selected countries and mark each match as "checked." In other words, I need to restore the state of the check-box list to reflect what was originally checked. Should I handle this type of logic in the controller by iterating over two nested loops (all countries vs. selected countries), or is there a more efficient way to accomplish this using directives?
Here is the check-box list:
<div class="form-group">
<label for="selectbasic">What country is the data for</label>
<div>
<div style='height:100px;overflow-y:auto;border:solid 1px #aaa;'>
<div ng-repeat="item in countries">
<input type='checkbox' ng-model="item.checked" ng-change="checkit()" /> {{item.name}}
</div>
</div>
</div>
</div>
And here is a snippet from my controller where I can possibly address this issue:
function getServiceRequestById(Id) {
dataFactory.getServiceRequestById(Id)
.success(function (request) {
// Code to set scope variables here
var list = [];
var countries = request.SelectedCountries.split(',');
console.log('Number of countries: ' + countries.length);
console.log('Selected countries: ' + countries[0] + ' --- ' + countries[1]);
$scope.checkit = function () {
for (var p in $scope.countries) {
if ($scope.countries[p].checked) {
list.push($scope.countries[p].name);
console.log("Selected country: " + $scope.countries[p].name);
}
} return list;
}
console.log('EditServiceRequestCtrl Request : ' + request);
})
.error(function (error) {
console.log('getServiceRequestById returned error');
});
}