Setting readonly using ng-readonly dynamically is not working - angularjs

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.

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

Answer 2

<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.

Answer 3

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}}" />

Answer 4

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