Javascript 在 Angular JS 中重新启用 ng-disabled 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28936215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
re enabling ng-disabled button in Angular JS
提问by Shareer
I am a newbie to AngularJS. I have created a form with fields which is disabled using ng-disabledby default. when I click on the edit <button>I want these fields to re-enable.
我是 AngularJS 的新手。我创建了一个包含ng-disabled默认禁用使用的字段的表单。当我单击编辑时，<button>我希望这些字段重新启用。
HTML
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>
Controller
控制器
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
});
}
回答by Kalhan.Toress
in controller create scope variable,
在控制器中创建范围变量，
$scope.disabled= true;
and replace all ng-disabledwith that variable like,
并ng-disabled用该变量替换所有内容，例如，
...ng-model="exchange_dt.name" ng-disabled="disabled"....
when you click on edit button set $scope.disabledto falselike,
当您单击设置$scope.disabled为false喜欢的编辑按钮时，
$scope.edit_exchange_setting_click = (function(){
$scope.disabled = false;
});
回答by Divya MV
you can have a scope variable keeping the trueor falsevalue.and a setter for that variable.
你可以有一个作用域变量来保存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;
};
}
}
and in your HTML you can bind that getter function.
在您的 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>
回答by V31
A different (however similar) approach is to wrap your form contents in a fieldset and have ng-disabled in the fieldset only rather than in all the input fields. To make the html more cleaner.
一种不同（但相似）的方法是将表单内容包装在一个字段集中，并仅在该字段集中而不是在所有输入字段中禁用 ng-disabled。使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>
and now in the controller set the isFormSetForSaving to true/false as per your logic.
现在在控制器中根据您的逻辑将 isFormSetForSaving 设置为 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;
});
}
回答by squiroid
You need to create a variable at the top of controller say
你需要在控制器顶部创建一个变量说
$scope.mydisabled=true;
then set your ng-disable with the variable
然后用变量设置你的 ng-disable
ng-disabled="mydisabled"
ng-disabled="mydisabled"
and on click of edit button set its value to false
并单击编辑按钮将其值设置为 false
$scope.mydisabled=false;
UPDATEFiddle
更新小提琴
