在 Angular JS 中重新启用禁用 ng 的按钮
re enabling ng-disabled button in Angular JS
我是AngularJS的新手。我创建了一个带有字段的表单,默认情况下使用 ng-disabled
禁用该字段。当我单击编辑<button>
时,我希望这些字段重新启用。
.HTML
<form class="form-horizontal" role="form" ng-submit="edit_setting()" ng-controller="ExchangeController">
<div class="form-group">
<label>Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.name" ng-disabled="true">
</div>
</div>
<div class="form-group">
<label>Host Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.host_name" required ng-disabled="true">
</div>
</div>
<div class="form-group">
<label>Address</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.address" ng-disabled="true">
</div>
</div>
</form>
控制器
function ExchangeController($scope, $http, $cookieStore, $location) {
var edit_exchange_setting = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
$http.get(edit_exchange_setting).success(function(response){
$scope.exchange_dt.exchange_name = response.name;
$scope.exchange_dt.exchange_host_name = response.host_name;
$scope.exchange_dt.exchange_last_processed_date = response.address;
});
$scope.edit_exchange_setting_click = (function(){
// how can i make the fields re enable here
});
}
在控制器中创建作用域变量,
$scope.disabled= true;
并将所有ng-disabled
替换为该变量,例如,
...ng-model="exchange_dt.name" ng-disabled="disabled"....
当您单击编辑按钮时,$scope.disabled
设置为false
喜欢,
$scope.edit_exchange_setting_click = (function(){
$scope.disabled = false;
});
您可以使用一个范围变量来保存true
或false
值,并为该变量设置一个资源库。
function ExchangeController($scope, $http, $cookieStore, $location) {
var edit_exchange_setting = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
$http.get(edit_exchange_setting).success(function(response){
$scope.exchange_dt.exchange_name = response.name;
$scope.exchange_dt.exchange_host_name = response.host_name;
$scope.exchange_dt.exchange_last_processed_date = response.address;
});
$scope.edit_exchange_setting_click = (function(){
// how can i make the fields re enable here
});
$scope.dtName=true;
$scope.isdtNameDisabled=function()
{
return $scope.dtName;
};
$scope.updatedtName=function(flag)
{
$scope.dtName=flag;
};
}
在你的HTML中,你可以绑定那个getter函数。
<div class="form-group">
<label>Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.name" ng-disabled="isdtNameDisabled()>
</div>
</div>
你需要
在控制器的顶部创建一个变量,比如
$scope.mydisabled=true;
然后使用变量设置您的 ng 禁用
ng-disabled="mydisabled"
并在单击编辑按钮时将其值设置为 false
$scope.mydisabled=false;
更新小提琴
另一种(无论多么相似)的方法是将表单内容包装在字段集中,并在字段集中禁用 ng,而不是在所有输入字段中禁用。使 html 更清晰。
<form class="form-horizontal" role="form" ng-submit="edit_setting()" ng-controller="ExchangeController">
<fieldset ng-disabled ="isFormSetForSaving">
<div class="form-group">
<label>Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.name">
</div>
</div>
<div class="form-group">
<label>Host Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.host_name" required>
</div>
</div>
<div class="form-group">
<label>Address</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.address">
</div>
</div>
</fieldset>
</form>
现在在控制器中,根据您的逻辑将 isFormSetForSave 设置为 true/false。
function ExchangeController($scope, $http, $cookieStore, $location) {
$scope.isFormSetForSaving = true;
var edit_exchange_setting = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
$http.get(edit_exchange_setting).success(function(response){
$scope.exchange_dt.exchange_name = response.name;
$scope.exchange_dt.exchange_host_name = response.host_name;
$scope.exchange_dt.exchange_last_processed_date = response.address;
});
$scope.edit_exchange_setting_click = (function(){
// how can i make the fields re enable here
$scope.isFormSetForSaving = false;
});
}
相关文章:
- ng disabled在chrome中不起作用.按钮在角度上未禁用
- 角度无线电按钮ng模型不起作用
- 当我的所有 Ng-from 都有效时启用一个按钮
- Ng点击记住单选按钮选择
- 使用ng-hide根据条件显示/隐藏按钮
- 如果ng单击附加到提交按钮,则表单未验证
- 为什么ng-click被称为按钮被点击的次数
- 将 ng 重复中的单选按钮设置为选中
- 在 Angular JS 中重新启用禁用 ng 的按钮
- 嵌套ng中的Angularjs单选按钮重复未选中
- 如何在控制器内获取ng重复单选按钮值
- 使用嵌套ng中带有单选按钮的ng模型重复不起作用
- 在Angular中绑定剑道网格按钮's ng click
- 按下按钮时,ng点击不起作用
- ng单击mdListItem和辅助按钮
- 使用AngularJS处理嵌套ng重复.无法通过ng单击来获取按钮
- 禁用fieldset ng不适用于angular js中的按钮
- 角度ng内的多个单选按钮组重复
- Safari中Angular ng显示的按钮闪烁
- ng按钮错误不工作,只显示一条消息angularjs