动态使用 ng-readonly 设置只读不起作用

Question

我正在从数据库服务器获取一些数据并在我的 GUI 上以表格格式显示相同的数据。我想在我的 GUI 设计中实现以下目标

(a) table 中的任何单元格都应为 editable，但 table 中的第一列除外。 (b) table 的第一行，如果新添加到 GUI 以接受用户的新输入，则应免除上述规则，即第一行的所有列都应为 editable.

为了实现这一点，我编写了以下代码。

HTML代码

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

控制器代码如下

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

当我执行上面的代码时，所有行的第一列都按预期得到 uneditable。但是当我向 GUI 添加新行时（通过在同一控制器的另一个函数中的传感器数据数组中添加新的空 JSON 对象），该行的第一列正在获取 uneditable 应该上述方法中的第一个 if 语句并非如此。我无法弄清楚为什么会这样。

Answer 1

您可以尝试 if else 语句，它可以正确设置变量

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

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.

有很多解决方案，但这取决于 you/your 需求。在这里我想和大家分享2个逻辑：

为用户输入的新对象添加新键，并使用这个新键将它们与旧对象区分开ng-readonly="x.new"，新对象应该有这个键：{name:"", new: true}
存储主数组的长度，并使用它来区分输入的新对象 ng-readonly="$index < mainlength" 和 mainlength 类似于：$scope.mainlength = angular.copy($scope.sensordata.length)（使用 angular.copy ) 参见 http://plnkr.co/edit/zCcyPTG3EybL4IjsOpz4?p=preview

Answer 3

你可以直接把条件放在ng-readonly中，如下所示

   <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

<input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-model-options="{ updateOn: 'blur' }" ng-readonly="x.name.length"/> 这一行解决了我的问题。如果没有 ng-model-options 属性，只要在新添加的行中键入一个字符，第一列就会变得不可编辑。使用 ng-model-options 解决了这个问题，因为现在当焦点从输入字段移开时，该列将变得不可编辑。

不要在控制器中写入任何方法。

动态使用 ng-readonly 设置只读不起作用

Setting readonly using ng-readonly dynamically is not working

readonly-attribute

angularjs