re abilitando il pulsante ng disabilitato in JS angolare

Question

Sono un principiante di AngularJS. Ho creato un modulo con campi che sono disabilitati usando ng-disabled per impostazione predefinita. quando clicco sulla modifica <button> voglio riattivare questi campi.

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 

     }); 
    } 

Answer 1

controller creare variabile portata,

$scope.disabled= true; 

e sostituire tutti ng-disabled con quella variabile come,

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

quando si fa clic sul pulsante Modifica set $scope.disabled-false come,

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

Answer 2

È necessario creare una variabile nella parte superiore del regolatore dicono

$scope.mydisabled=true; 

quindi impostare il vostro ng-disabilitare con la variabile

ng-disabled = "mydisabled"

e O n clic del pulsante di modifica impostare il suo valore su false

$scope.mydisabled=false; 

UPDATE Fiddle

Answer 3

si può avere una variabile ambito mantenendo il true o false value.and un setter per quella variabile.

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

}

e nel vostro HTML è possibile associare quella funzione 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> 

Answer 4

A (comunque simile) diverso approccio è quello di avvolgere il contenuto del modulo in un fieldset e hanno ng disabile nel fieldset solo piuttosto che in tutti i campi di input. Per rendere l'html più pulito.

<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> 

e ora nel controller impostare isFormSetForSaving su true/false secondo la logica.

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