在ng-options组中，所选选项未显示
见图像：
我在使用AngularJS ng-options时遇到问题，即使ng-model有价值，也没有显示已选择的选项，请任何人帮我解决问题。在这里，我将分享我的代码HTML代码和JavaScript代码
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;
}
})
1 个答案:
答案 0 :(得分：0)
答案如下：
$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) {
});
另一个提示：
我正在使用缓存。
我正在从响应缓存每个项目，如果我得到一个与我的缓存中的条目（类和）id匹配的其他响应，我使用缓存中的项目。
Thas还允许您重命名条目，在视图中显示项目的每个位置，将显示新名称
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？