Setting readonly using ng-readonly dynamically is not working

Question

I am fetching some data from the database server and displaying the same in tabular format on my GUI. I want to achieve the following in my GUI design

(a) Any cell in the table should be editable except the first column in the table. (b) The first row of the table, if added newly to the GUI for accepting new inputs from the user, should be exempted from the above rule i.e., all columns of the first row should be editable.

To achieve this I wrote the following code.

HTML Code

    <tbody>
           <tr ng-repeat="x in sensordata">
           <td>
             <input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-readonly="namereadonly" ng-init="ctrl2.setReadOnly(x.name,$index)"/>
           </td>
           <td>
              <input class="form-control" type="text" ng-model="x.unit" placeholder="Measurement Unit" required/>
           </td>
           <td>
                <input class="form-control" type="text" ng-model="x.type" placeholder="Sensor Type" required/>
           </td>
           <td>
                <input class="form-control" type="text" ng-model="x.periodicity" placeholder="Periodicity" required/>
           </td>
           <td>
                <input class="form-control" type="text" ng-model="x.formula" placeholder="Formula" required/>
           </td>
           <td>
               <input class="form-control" type="email" ng-model="x.vendor" placeholder="Email Id" required/>
           </td>
           </tr>
   </tbody>

Controller code is as follows.

this.setReadOnly = function(name,idx) {
        console.log('name ' + name + ' idx ' + idx);
        if (name === undefined || name === null || name === '') $scope.namereadonly = false;
        if (name !== '' || name !== undefined || name !== null) $scope.namereadonly = true;
    };

When I am executing above code the first column of all the rows are getting uneditable as expected. But when I am adding new row to the (by adding new empty JSON object in the sensordata array in another function of the same controller) GUI, the first column of the row is getting uneditable which should not be the case as per the first if statement in the above method. I am unable to figure out why it is happening.

score 1 · Answer 1 · answered Jul 04 '17 at 05:54

1

you can try if else statement, which sets the variable properly

this.setReadOnly = function(name,idx) {
    console.log('name ' + name + ' idx ' + idx);
    if (name === undefined || name === null || name === '') $scope.namereadonly = false;
    else (name !== '' || name !== undefined || name !== null) $scope.namereadonly = true;
};

answered Jul 04 '17 at 05:54

Stark Buttowski

1,799
2
10
21

The problem has been rectified partially when I changed if statement as "if (name === undefined || name === null || name === '') { $scope.idx = false;} and if (name !== '' || name !== undefined || name !== null) { $scope.idx = true; console.log('readonly');}" and ng-readonly="$index". This probably is taking care of readonly attribute independently for each input element. But, now , the first column of first row of the table is becoming editable when it should be uneditable as I have not yet added new row to the GUI. – Satya Narayana Jul 04 '17 at 05:58
it is helpful if you share it as fiddle – Stark Buttowski Jul 04 '17 at 06:16

score 1 · Accepted Answer · answered Jul 07 '17 at 10:15

<input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-model-options="{ updateOn: 'blur' }" ng-readonly="x.name.length"/> this line solved my problem. Without ng-model-options attribute as soon as one types a character in the newly added row the first column is becoming uneditable. With ng-model-options this issue is resolved as now the column would become uneditable upon moving focus from the input field.

No method is to be written in the controller.

Fetrarij · Answer 3 · 2017-07-04T14:51:51.107

a) Any cell in the table should be editable except the first column in the table. (b) The first row of the table, if added newly to the GUI for accepting new inputs from the user, should be exempted from the above rule i.e., all columns of the first row should be editable.

There are plenty solutions but it depends on you/your needs. Here I would like to share you 2 logics :

adding new key for the new object entered by user and use this new key to distinct them with old object ng-readonly="x.new" and new object should have this key: {name:"", new: true}
Store the length of main array, and use this to distinct the new object entered ng-readonly="$index < mainlength" and mainlength is something like: $scope.mainlength = angular.copy($scope.sensordata.length) (use of angular.copy ) see http://plnkr.co/edit/zCcyPTG3EybL4IjsOpz4?p=preview

Nitu Bansal · Answer 4 · 2017-07-04T07:24:51.270

0

you can put the condition directly in ng-readonly as below

   <input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-readonly="{{x.name !== '' && x.name !== undefined && x.name !== null}}" />

edited Jul 04 '17 at 07:24

answered Jul 04 '17 at 07:13

Nitu Bansal

3,826
3
18
24

Setting readonly using ng-readonly dynamically is not working

4 Answers4