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

    };

我们需要看到一些代码，才可以真正帮助了。但是，我相信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/

谢谢..我认为这是我需要做的..将尝试 – siempreCuriosa

角度Xeditable使表单字段只读单击编辑按钮

相关推荐