在Angular JS中重新启用ng-disabled按钮

I am a newbie to AngularJS. I have created a form with fields which is disabled using ng-disabled by default. when I click on the edit <button> I want these fields to re-enable.

我是AngularJS的新手。我创建了一个包含字段的表单，默认情况下使用ng-disabled禁用。当我点击编辑 <按钮> 时，我希望这些字段重新启用。

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

      });
  }

4 个解决方案

#1

in controller create scope variable,

在控制器中创建范围变量，

$scope.disabled= true;

and replace all ng-disabled with that variable like,

并用该变量替换所有ng-disabled，如，

...ng-model="exchange_dt.name" ng-disabled="disabled"....

when you click on edit button set $scope.disabled to false like,

当你单击编辑按钮时将$ scope.disabled设置为false，

$scope.edit_exchange_setting_click = (function(){      
    $scope.disabled = false;
});

#2

you can have a scope variable keeping the true or false value.and a setter for that variable.

你可以让一个范围变量保持真值或假值。并为该变量设置一个setter。

  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>

#3

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-禁用= “mydisabled”

and on click of edit button set its value to false

并在单击编辑按钮时将其值设置为false

$scope.mydisabled=false;

UPDATE Fiddle

更新小提琴

#4

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;
      });
  }

#1