एंगुलर जेएस

Question

में एनजी-अक्षम बटन को पुनः सक्षम करने के लिए मैं AngularJS के लिए नौसिखिया हूं। मैंने फ़ील्ड के साथ एक फॉर्म बनाया है जो डिफ़ॉल्ट रूप से ng-disabled का उपयोग करके अक्षम कर दिया गया है। जब मैं <button> पर क्लिक करता हूं, तो मैं इन फ़ील्ड को फिर से सक्षम करना चाहता हूं।

एचटीएमएल

<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 

     }); 
    } 

नियंत्रक में

Answer 1

गुंजाइश चर बनाने,

$scope.disabled= true; 

और उस चर की तरह के साथ सभी ng-disabled की जगह,

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

जब आप संपादित करें बटन पर क्लिक करें false की तरह करने के लिए $scope.disabled निर्धारित करते हैं,

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

Answer 2

आप नियंत्रक के शीर्ष पर एक चर बनाने की आवश्यकता कहना

$scope.mydisabled=true; 

तो चर के साथ अपने एनजी-को निष्क्रिय सेट

एनजी-विकलांग = "mydisabled"

और ओ संपादित करें बटन का n क्लिक झूठी

$scope.mydisabled=false; 

अद्यतन Fiddle

Answer 3

लिए अपने मूल्य सेट करते समय गुंजाइश चर true या false value.and एक चर के लिए सेटर रखने हो सकता है।

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 में आपको लगता है कि गेटर समारोह बाध्य कर सकते हैं।

<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

एक अलग (हालांकि समान) दृष्टिकोण एक fieldset में अपने प्रपत्र सामग्री रैप करने के लिए है और एनजी-विकलांग fieldset में केवल बजाय सभी इनपुट क्षेत्र में है। एचटीएमएल को और अधिक क्लीनर बनाने के लिए।

<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 सेट में।

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