如何使用AngularJS在下拉列表中设置值?
问题描述:
我需要如何在多个下拉列表中使用angular.js.设置相同的值。我在下面解释我的代码。如何使用AngularJS在下拉列表中设置值?
<table class="table table-bordered table-striped table-hover" id="dataTable">
<tr>
<td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
<BR>Day <i class="fa fa-long-arrow-down"></i>
</td>
<td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td>
</tr>
<tbody id="detailsstockid">
<tr ng-repeat="days in noOfDays">
<td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td>
<td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours">
<table style="margin:0px; padding:0px; width:100%">
<tr>
<td>
<select id="coy" name="coy" class="form-control" ng-model="sub_name " ng-options="sub.name for sub in listOfSubjectName track by sub.value">
</select>
</td>
</tr>
<tr>
<td>
<select id="coy" name="coy" class="form-control" ng-model="fac_name " ng-options="fac.name for fac in listOfFacultyName track by fac.value">
</select>
</td>
</tr>
</td>
</table>
</td>
</tr>
</tbody>
</table>
这里值该表的每一行中动态地设置和值也同样对所有的行和column.My控制器文件代码在下面给出。
$scope.noOfDays = [];
$scope.days = {
'0': "Monday",
'1': 'Tuesday',
'2': 'Wednesday',
'3': 'Thursday',
'4': 'Friday'
}
$scope.hours = [
'9AM :: 10AM',
'10AM :: 11AM',
'11:15AM :: 12:15PM',
'12:15PM :: 01:15PM',
'02PM :: 03PM',
'03PM :: 04PM',
'04PM :: 05PM'
]
for (var i = 0; i < 5; i++) {
$scope.noOfDays.push($scope.days[i]);
}
$scope.listOfSubjectName=[{
name: 'Select Cource',
value: ''
}]
$scope.listOfFacultyName=[{
name: 'Select Faculty',
value: ''
}]
在这里,我需要假设我选自select course
一个值,其自动和显示是'12:15PM :: 01:15PM'
下,所选择的值将在其中下只是下一个3组时间(i.e-'02PM :: 03PM','03PM :: 04PM','04PM :: 05PM
)来选择病程下拉列表进行设置。在这里,我可以从任何地方选择价值,但在那之后,选定的价值应该设置下面3组下拉列表。请帮助我。
答
这里的你在找什么 [jsFiddle]。你将不得不通过调用方法上ng-change
事件这样来触发下一个选择项的变化:
<select class="form-control" ng-model="sub_name[days + hour]" ng-change="setSub(days, hour)" ng-options="sub.name for sub in listOfSubjectName track by sub.value">
的方法应该是这个样子:
$scope.setFac = function(day, hour){
console.log("set fac "+ day + ", " + hour);
var next = 0;
$scope.hours.forEach(function(hr){
if(hr === hour || next){
next++;
}
if(next > 0 && next < 4){
$scope.fac_name[day + hr] = $scope.fac_name[day + hour];
}
else{
// clear previous selection
$scope.fac_name[day + hr] = null;
}
});
};
$scope.setSub = function(day, hour){
console.log("set sub "+ day + ", " + hour);
var next = 0;
$scope.hours.forEach(function(hr){
if(hr === hour || next){
next++;
}
if(next > 0 && next < 4){
$scope.sub_name[day + hr] = $scope.sub_name[day + hour];
}
else{
// clear previous selection
$scope.sub_name[day + hr] = null;
}
});
};
这里需要唯一通过使用days
和hour
值,在每个select
项目中识别您的模型。否则,当你选择一个元素时,你所有的select
元素都会得到相同的值。
编辑:基于评论
答
控件中的选定项和listOfSubjectName.name的值具有两个绑定。因此,在JavaScript中更改listOfSubjectName.name,或者更改控件中的值,更新另一个。如果listOfSubjectName.name的值为0,则应该选择该项目。
listOfSubjectName是一个数组,listOfSubjectName.name必须设置为objects.So你的代码更改你在向下
$scope.listOfSubjectName = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
//default selected value is listOfSubjectName[0] but if you want selected value can listOfSubjectName[1]
$scope.sub_name= $scope.listOfSubjectName [1];
//select subject name add into the FacultyName array
$scope.listOfFacultyName=[{
name: 'Select Faculty',
value: '',
currentsubjectName:$scope.sub_name,
}]
HTML部分综述见其中的一个:
<select id="coy" name="coy" class="form-control" ng-model="fac_name.currentsubjectName" ng-options="fac.name for fac in listOfFacultyName track by fac.value">
感谢它的工作,但一个littile问题是否存在假设第一组值已经选择,如果用户选择任何第二组值将使第一组回到正常状态。 – subhra
不确定你的意思。但是,如果您需要清除先前选择的值,则需要循环访问该行的'day + hour'组合,并在应用新值之前将'$ scope.sub_name'或$ scope.fac_name'设置为null 。 –
我的意思是假设用户选择了第3个设置值。如果他选择了任何其他设置值,则以前的值将为null。请您在jsfiddle中添加您的代码。 – subhra