在AngularJS中如何刷新取消选中复选框的下拉菜单
How to refresh dropdown on unchecking the checkbox in AngularJS
我在选择下拉列表时遇到了问题。当我取消选中复选框时,我想从angularJS中的数组中刷新下拉列表。基本上,我正在努力开发一种形式,我将在下拉菜单中选择一个价值控股公司,我的所有下拉菜单被禁用,我的复选框被选中。当我释放我在下拉菜单中选择的值保持不变。当我取消选中复选框时,我想刷新下拉列表。
代码如下:
<div class="col-md-6 col-sm-6">
<select id="dropdown1" ng-model="of" class="form-control col-md-7 col-xs-12" ng-click="dropdown()">
<option ng:repeat=" officet in officetypes" value="{{officet.headoffice}}">{{officet.headoffice}}</option>
</select>
</div>
<input id="Checkbox1" ng-model="checkboxvalue" type="checkbox" name="abc" value="bca" ng-click="check()" />Is Main Entity
$scope.officetypes = [
{
headoffice: 'Branches',
description: 'Branches'
},
{
headoffice: 'Holding Company',
description: 'Holding Company'
},
{
headoffice: 'Subsidiaries',
description:'Subsidiaries'
},
{
headoffice: 'Ware house',
description: 'Ware house'
}];
$scope.check = function () {
alert($scope.checkboxvalue + " Checked");
//document.getElementById('dropdown1').disabled = true;
if ($scope.temp === 0) {
document.getElementById('dropdown1').disabled = true;
document.getElementById('Dropdown2').disabled = true;
document.getElementById('Dropdown3').disabled = true;
$scope.temp = 1;
}
else if ($scope.temp === 1) {
document.getElementById('dropdown1').disabled = false;
document.getElementById('Dropdown2').disabled = false;
document.getElementById('Dropdown3').disabled = false;
document.getElementById('dropdown1').selectedIndex = 1;
$scope.temp = 0;
}
else if ($scope.temp === 2) {
document.getElementById('dropdown1').disabled = false;
document.getElementById('Dropdown2').disabled = false;
document.getElementById('Dropdown3').disabled = false;
$scope.temp = 0;
}
}
$scope.dropdown = function () {
if ($scope.of === 'Holding Company') {
$scope.checkboxvalue = true;
document.getElementById('dropdown1').disabled = true;
document.getElementById('Dropdown2').disabled = true;
document.getElementById('Dropdown3').disabled = true;
document.getElementById('Checkbox1').checked = true;
$scope.temp = 2;
alert($scope.temp);
temp = 0;
}
else if ($scope.of !== 'Holding Company') {
$scope.checkboxvalue = false;
document.getElementById('dropdown1').disabled = false;
document.getElementById('Dropdown2').disabled = false;
document.getElementById('Dropdown3').disabled = false;
$scope.temp = 0;
}
if ($scope.of === 'Subsidiaries') {
document.getElementById('Dropdown3').disabled = true;
}
if ($scope.of === 'Branches') {
document.getElementById('dropdown1').disabled = false;
document.getElementById('Dropdown2').disabled = false;
document.getElementById('Dropdown3').disabled = false;
}
}
你可以检查这个答案,这可能对你有帮助
$scope.of = 0 ;
此模态值为零,用于重置下拉菜单
http://plnkr.co/edit/h5em3jDXr049LOe86Fvm?p =预览
您可以使用$watch
来检查复选框模型值的更新就像,在你的angular控制器中你应该写
$scope.$watch('checkboxvalue', function(newVal, oldVal) {
if(newVal != oldVal){
// re-assign value for officetypes (ng-repeat)
}
});
我希望它能成功。
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- 使用jquery选中/取消选中单个复选框
- 使用javascript在页面加载时取消选中所有复选框
- (取消)使用单独的复选框激活复选框列表
- jQuery-取消选中复选框
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- Javascript选中/取消选中所有复选框并将值写入文本区域
- dojo/cbtree取消选中所有复选框并选中选中复选框
- 通过选中和取消选中复选框来添加和删除数组中的值
- 当与之关联的 ng-model 为 false 时,Angularjs 复选框值不会取消选中
- 取消复选框未进行可视化更新
- 复选/取消复选框不能与prop功能一起工作
- 在剑道ui网格中上下滚动时取消复选框
- 检查条件后使用jQuery取消复选框
- 当另一个复选框被选中时,取消复选框,但如果被选中,也取消复选框
- JQuery .prop函数不工作,取消复选框
- 取消复选框绑定
- 如何在不取消复选框的情况下通过Ajax更新复选框列表
- 绑定点击事件后无法取消复选框