角度Xeditable使表單字段只讀單擊編輯按鈕

當單擊編輯按鈕時，我希望一個字段爲只讀，但單擊添加按鈕時可以輸入該值。我嘗試了ng-readonly角度，但目前爲止它還沒有工作。有什麼建議麼？角度Xeditable使表單字段只讀單擊編輯按鈕

HTML

     <tr ng-repeat="row in rowCollection"> 
          <td><span editable-text="row.inputToken" e-name="inputToken" e-form="gridForm" ng-disabled="row.isreadonly">{{row.inputToken}}</span></td> 
          <td><span editable-text="row.standardForm" e-name="standardForm" e-form="gridForm">{{row.standardForm}}</span></td> 
          <td><span editable-select="row.classification" e-name="classification" onshow="" e-form="gridForm">{{row.classification}}</span></td> 
          <td><span editable-text="row.similarityThreshold" e-name="similarityThreshold" e-form="gridForm">{{row.similarityThreshold}}</span></td> 

          <td style="white-space: nowrap"> 

           <form editable-form name="gridForm" onbeforesave="saveRecord($data)" ng-show="gridForm.$visible" class="form-buttons form inline" shown="inserted == row"> 
            <button type="submit" ng-disabled="gridForm.$waiting" class="btn">Save</button> 
            <button type="button" ng-disabled="gridForm.$waiting" ng-click="cancelRecord();gridForm.$cancel()" class="btn">Cancel</button> 
           </form> 
           <div class="buttons" ng-show="!gridForm.$visible"> 
            <button class="btn" type="button" ng-click="gridForm.$show()">Edit</button> 
            <button class="btn" type="button" ng-click="deleteRecord($index)">Delete</button> 
           </div> 
          </td> 
         </tr> 
         </tbody>

Controller.js

var stan = angular.module('stanuiApp', ['ui.bootstrap','smart-table','xeditable']); 

stan.run(function(editableOptions){ 
    editableOptions.theme = 'default'; 
}); 

stan.controller('MainCtrl',function ($scope, $window, $http,$filter) { 
    $scope.root = {}; 
    $scope.items = []; 

    $scope.rowDummy = [ 
        {inputToken: 'awesome user1',standardForm:'fdffd',classification:'sadfdaf',similarityThreshold:900}, 
        {inputToken: 'awesome user1',standardForm:'fdffd',classification:'sadfdaf',similarityThreshold:900}, 
        {inputToken: 'awesome user1',standardForm:'fdffd',classification:'sadfdaf',similarityThreshold:900} 
        ]; 

    $scope.init = function() { 
     $http({ 
        method : 'GET',      
        url : 'http://localhost:9080/StanClassification/ClassificationServlet', 
        data:"", 
        headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 

      }).success(function(data, status, headers, config) { 
        $scope.root = data; 
      }).error(function(data, status, headers, config) { 
        console.log("error"); 
      }); 

     $http({ 
      method : 'POST',    
      url : 'http://localhost:9080/StanClassification/ClassificationServlet', 
      data: 'ruleName=' + 'DENAME', 
      headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 

     }).success(function(data, status, headers, config) { 
       $scope.options = data.options; 
       $scope.items = data.classifications; 
       $scope.rowCollection = [].concat($scope.items); 

       //console.log("hjhdj--"+JSON.stringify($scope.rowCollection)); 

     }).error(function(data, status, headers, config) { 
       console.log("error"); 
     }); 

    }; 

    $scope.addRecord = function() { 
      console.log("In add record"); 
     // console.log("before "+JSON.stringify($scope.rowCollection)); 
     $scope.add = true; 
     $scope.inserted = {  
        inputToken :'', 
        standardForm :'', 
        classification :'', 
        similarityThreshold :'' 
       }; 
     $scope.items.unshift($scope.inserted); 
     //$scope.rowCollection = [].concat($scope.items); 
     //$scope.items.unshift($scope.inserted); 
     console.log("add "+JSON.stringify($scope.items)); 
    }; 

    $scope.cancelRecord = function() { 

     if($scope.add === true) 
     { 
      $scope.add = false; 
      console.log($scope.add); 
      $scope.items.splice(0,1); 
      console.log("cancel "+JSON.stringify($scope.items)); 
     } 

    };

來源

2015-07-10 siempreCuriosa

我們需要看到一些代碼，纔可以真正幫助了。但是，我相信xeditable只會生成添加'editable-x'（其中x是select，text等）元素以便編輯的元素。如果您只是刪除此元素，則該字段不應再可編輯。 –

當我刪除xeditable時，當我需要添加新記錄時，該字段不再可編輯。我添加了代碼。 – siempreCuriosa

您可以使用E-屬性來做到這一點。在你的情況下，你添加e-ng-readonly到你的範圍。像

<span e-text="user.name" e-ng-readonly="flag">{{user.name}}</span>

下面是一個例子 http://jsfiddle.net/n5L9wykx/

來源

2015-07-10 15:36:39

謝謝..我認爲這是我需要做的..將嘗試 – siempreCuriosa

角度Xeditable使表單字段只讀單擊編輯按鈕

回答

相關問題