Включение кнопки ng-disabled в Angular JS

8

Я новичок в AngularJS. Я создал форму с полями, которые по умолчанию отключены с помощью ng-disabled. когда я нажимаю на edit <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

      });
  }

4 ответа

9
Лучший ответ

в контроллере создайте переменную области видимости,

$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;
});
  • 0
    вот демо fiddle.jshell.net/mnj0tdmd
  • 0
    это сработало. Спасибо @K.ToressК.Торесс
Показать ещё 1 комментарий
2

у вас может быть переменная области видимости, поддерживающая значение 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>
1

Вам нужно создать переменную в верхней части контроллера, скажем

$scope.mydisabled=true; 

затем установите ng-disable с переменной

нг-инвалидов = "mydisabled"

а при нажатии кнопки редактирования установите его значение на false

$scope.mydisabled=false;

UPDATE Fiddle

0

Другой (как бы то ни было) подход заключается в том, чтобы обернуть содержимое формы в наборе полей и отключить 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>

а теперь в контроллере установите 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;
      });
  }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню