angularjsng-options
In ng-options group by selected option is not appearing
see the image:
I have issue while working with AngularJS ng-options, the already selected option is not showing even though ng-model have value, please can any one help me to resolve the issue. Here I am sharing my code HTML code and JavaScript code
HTML
<div data-ng-controller="skillController">
<div class="content-wrapper">
<div class="row" data-ng-if="initial" >
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Skill</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Exp In
years</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Exp In
months</div>
</div>
<div class="row">
<fieldset data-ng-repeat="choice in choices">
<select class="col-xs-2 col-sm-2 col-md-2 col-lg-2 "
data-ng-model="choice.skill" data-ng-options="skills.Skill group by skills.Category for skills in skillsList">
<option value="">Select skill</option>
<!-- <option data-ng-options="skills.Skill group by skills.Category for skills in skillsList">{{skills.Skill}} -->
</select>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<select class="col-xs-2 col-sm-2 col-md-2 col-lg-2"
data-ng-model="choice.years">
<option value="">Select years</option>
<option data-ng-repeat="year in years">{{year}}</option>
</select>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<select class="col-xs-2 col-sm-2 col-md-2 col-lg-2 "
data-ng-model="choice.months">
<option value="">Select months</option>
<option data-ng-repeat="month in months">{{month}}</option>
</select>
<button class="remove" data-ng-show="$last"
data-ng-click="removeChoice()">-</button>
<button class="add" data-ng-show="$last"
data-ng-click="addNewChoice()">+</button>
</fieldset>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button class="addfields" data-ng-click="submit()">Save Changes</button>
</div>
</div>
</div>
</div>
<br> <br>
<div class="row" data-ng-if="fildset">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div data-ng-if="choices.length>0">
<table class="table table-bordered">
<tr bgcolor="#9cc2e3">
<th>Skill</th>
<th>Exp.in Years</th>
<th>Exp.in Months</th>
</tr>
<tbody data-ng-repeat="set in choices ">
<tr>
<td>{{ set .skill.Skill }}</td>
<td>{{ set .years }}</td>
<td>{{ set .months }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button class="addfields" data-ng-click="editSkills()">Edit Skills</button>
</div>
</div>
</div>
<!-- for edit -->
<div class="row" data-ng-if="edit">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Skill</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Exp In
years</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Exp In
months</div>
</div>
<div class="row">
<fieldset data-ng-repeat="choice in choices track by $index">
<select class="col-xs-2 col-sm-2 col-md-3 col-lg-2 "
data-ng-model="choice.skill" data-ng-options="skills.Skill group by skills.Category for skills in skillsList">
</select>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<select class="col-xs-2 col-sm-2 col-md-2 col-lg-2"
data-ng-model="choice.years">
<option value="">Select years</option>
<option data-ng-repeat="year in years">{{year}}</option>
</select>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<select class="col-xs-2 col-sm-2 col-md-2 col-lg-2 "
data-ng-model="choice.months">
<option value="">Select months</option>
<option data-ng-repeat="month in months">{{month}}</option>
</select>
<button class="remove" data-ng-show="$last"
data-ng-click="removeChoice()">-</button>
</fieldset>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button class="addfields" data-ng-click="addNewChoice()">Add Another Skill</button>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button class="addfields" data-ng-click="submit()">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
var skill = angular.module('skillregister', [ 'shared.serviceFactory']).controller('skillController',
function($scope, $http, serviceFactory) {
$scope.fildset = false;
$scope.edit = false;
$scope.initial = true;
$scope.skillsList = [];//[ "C language", "C++ language", "JAVA", "J2EE","Angular Js"]
$scope.years = ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
$scope.months = ['00','01','02','03','04','05','06','07','08','09','10','11','12']
var request = serviceFactory.getPacket('getSkillList','GET');
$http(request).success(function successCallback(response) {
$scope.skillsList = response;
console.log($scope.skillsList);
}).error(function(data, status) {
});
$scope.choices = [{'skill': '','years': '', 'months': '' }];
$scope.addNewChoice = function() {
// var newItemNo = $scope.choices.length+1;
$scope.choices.push({'skill': '','years': '', 'months': '' });
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
$scope.submit = function(){
console.log("choices---->",$scope.choices);
var details = {
'skillset': $scope.choices
}
var request = serviceFactory.getPacket('insertSkillSet', 'POST',
details);
$http(request).success(function successCallback(response) {
$scope.response = response.result;
if ($scope.response == 'success') {
console.log($scope.response);
location.reload();
} else {
window.alert("changes update failed");
}
}).error(function(data, status) {
});
}
var request = serviceFactory.getPacket('getSkillSet','GET');
$http(request).success(function successCallback(response) {
if(response!=""){
$scope.choices = response;
$scope.initial = false;
$scope.fildset = true;
}
console.log($scope.choices);
}).error(function(data, status) {
});
$scope.editSkills = function(){
$scope.edit = true;
$scope.fildset = false;
}
})
Solution
Here the answer:
$http(request).success(function successCallback(response) {
if(response!=""){
$scope.choices = response;
$scope.initial = false;
$scope.fildset = true;
}
// angular is checking items to select in a selectbox by exact reference (===)
// so you need to replace the skill in your choice with the item from your SkillList to ensure, that angular can find out which entry to select at start
$scope.choices.forEach(function(choice) {
choice.skill = $scope.skillList.filter(function(item){return item.Skill == choice.Skill})[0]
});
console.log($scope.choices);
}).error(function(data, status) {
});
another tip:
I am working with cache.
I am caching each item from response and if i get an other response which will match with (class and) id from an entry in my cache, i use the item from cache.
Thas will also allow you to rename the entry once and every place where the item is shown in your view, the new name will be shown