Ashish Ashish -4 years ago 109
AngularJS Question

In angular smart table how to disable EDIT functionality for one row



/* created by Ashwini and Ashish on 2/3/2017 */
"use strict";

angular.module("IttTech.graphsettings").controller("graphsettingsCtrl", function ($scope, $element, $state, commonFactory, $rootScope, $stateParams, toastrFactory, appConfig) {
var customfilepath = "conf/customGraph.json";
$scope.i = 0;
var j = 0;

commonFactory.getGraphConfig(appConfig.dataPath + customfilepath).then(function (asyncCastData) {
$scope.graphConfig = asyncCastData;
$scope.gaphNode=asyncCastData.Node;
});

$scope.saveInJsonFile = function (data, index) {

var keys = Object.keys($scope.graphConfig.graph.nodes[0]);
j = index;
var key = keys[j]; // key
var value = $scope.graphConfig.graph.nodes[0][key]; // data
if (key !== data.key) {
delete $scope.graphConfig.graph.nodes[0][key]; // deleting data with old key
}
key = key.replace(key, data.key); // renaming key
$scope.graphConfig.graph.nodes[0][key] = value; // setting data with new key

commonFactory.saveJsonObj($scope.graphConfig).then(function (asyncCastData) {
});
}

$scope.addRow = function () {

var keyName = 'keyName';
$scope.inserted = {
size: null,
color: null,
bordercolor: null,
borderwidth: null,
textcolor: null,
fontsize: null,
caption: null
};

$scope.graphConfig.graph.nodes[0][keyName + $scope.i++] = $scope.inserted;


};
})

<div ba-panel ba-panel-title="Edit Graph Properties">
<div class="add-row-editable-table">
<button class="btn btn-primary" ng-click="addRow()">Add New Setting</button>
</div>
<table class="table table-bordered table-hover table-condensed">
<thead>
<th></th>
<th style="font-weight:bold">Node Label</th>
<th style="font-weight:bold">Size</th>
<th style="font-weight:bold">Color</th>
<th style="font-weight:bold">Border Color</th>
<th style="font-weight:bold">Border Width</th>
<th style="font-weight:bold">Text Color</th>
<th style="font-weight:bold">Font Size</th>
<th style="font-weight:bold">Caption</th>
<th style="font-weight:bold">Action</th>
</thead>
<tr ng-repeat=" (key,gp) in graphConfig.graph.nodes[0]" class="editable-row">

<td>{{$index}}</td>
<td>
<span editable-text="key" e-name="key" e-form="rowform"
data-e-style="max-width:45px" ng-model="key" e-required>
{{key}}
</span>
</td>
<td>
<span editable-text="gp.size" e-name="size" e-form="rowform" data-e-style="max-width:45px" e-required>
{{gp.size}}
</span>
</td>
<td>
<span e-name="color" e-form="rowform" data-e-style="max-width:45px" ng-show="!rowform.$visible"
e-required>
{{gp.color}}
</span>
<input colorpicker="hex" size="15px" colorpicker-position="right" ng-model="gp.color" type="text"
ng-show="rowform.$visible" e-form="rowform"/>
</td>
<td>
<span e-name="bordercolor" e-form="rowform" data-e-style="max-width:45px" ng-show="!rowform.$visible"
e-required>
{{gp.bordercolor}}
</span>
<input colorpicker="hex" size="15px" colorpicker-position="right" ng-model="gp.bordercolor" type="text"
ng-show="rowform.$visible" e-form="rowform"/>
</td>
<td>
<span editable-text="gp.borderwidth" e-name="borderwidth" e-form="rowform"
data-e-style="max-width:45px" e-required>
{{gp.borderwidth}}
</span>
</td>
<td>
<span e-name="textcolor" e-form="rowform" data-e-style="max-width:45px" ng-show="!rowform.$visible"
e-required>
{{gp.textcolor}}
</span>
<input colorpicker="hex" size="15px" colorpicker-position="right" ng-model="gp.textcolor" type="text"
ng-show="rowform.$visible" e-form="rowform"/>
</td>
<td>
<span editable-text="gp.fontsize" e-name="fontsize" e-form="rowform" data-e-style="max-width:45px"
e-required>
{{gp.fontsize}}
</span>
</td>
<td>
<span editable-text="gp.caption" e-name="caption" e-form="rowform" data-e-style="max-width:45px"
e-required>
{{gp.caption}}
</span>
</td>

<td>

<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline"
shown="inserted == gp">
<button type="submit" ng-disabled="rowform.$waiting" ng-click="saveInJsonFile(rowform.$data,$index)"
class="btn btn-primary editable-table-button btn-xs">
Save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()"
class="btn btn-default editable-table-button btn-xs">
Cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible" >
<button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit
</button>
</div>
</td>
</tr>
</table>
</div>





I am using angular smart table.I am displaying JSON data in table using ng-repeat.All rows are editable.But I want to disable edit functionality for on row.One row should be read only.
In my html table 22 record displayed from JSON.All rows are editable.How disable edit button(also save and cancel) for first row.

Answer Source

use $index, $first, $middle, $last, $even, $odd of ngRepeat statement for specific rows.

Here i recommend to use $first.

<button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()" ng-disabled="$first">
    Edit
</button>

see this sample demo here.

angular.module("app", []).controller("myCtrl", function($scope) {
  $scope.friends = [{
      name: 'John',
      age: 25,
      gender: 'boy'
    },
    {
      name: 'Jessie',
      age: 30,
      gender: 'girl'
    },
    {
      name: 'Johanna',
      age: 28,
      gender: 'girl'
    },
    {
      name: 'Joy',
      age: 15,
      gender: 'girl'
    }
  ]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="friend in friends">
      <td>
        {{$index}}
      </td>
      <td>
        <button ng-disabled="$first">test</button>
      </td>
    </tr>
  </table>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download