Angular Xeditable Make Form Field readonly on Clicking edit button

Question

I want one field to be readonly when edit button is clicked but on clicking add button the value can be entered. I tried angular ng-readonly but its not working so far. Any suggestions?

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

    };

We'll need to see some code before we can really help out. However, I believe xeditable only makes elements that add the editable-x (where x is select, text, etc.) element to editable. If you simply remove this element, the field should no longer be editable. — Joel Brewer
– Joel Brewer, Commented Jul 10, 2015 at 15:17
When i remove the xeditable, the field no longer remains editable when I need to add new record.. I have added the code. — siempreCuriosa
– siempreCuriosa, Commented Jul 10, 2015 at 16:22

Qi Tang · Accepted Answer · 2015-07-10 15:36:39Z

9

You can use e-attributes to do this. In you case, you add e-ng-readonly to your span. like

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

Here is an example http://jsfiddle.net/n5L9wykx/

answered Jul 10, 2015 at 15:36

Qi Tang

1,2657 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Xeditable Make Form Field readonly on Clicking edit button

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related