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

Question

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

(a) 除表格第一列外，表格中的任何单元格都应是可编辑的。 (b) 表格的第一行，如果新添加到GUI以接受用户的新输入，则应不受上述规则的约束，即第一行的所有列都应该是可编辑的。

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

网页代码

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

当我执行上面的代码时，所有行的第一列都按预期变得不可编辑。但是当我将新行添加到(通过在同一控制器的另一个函数的传感器数据数组中添加新的空 JSON 对象)GUI 时，行的第一列变得不可编辑，根据上述方法中的第一个 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

<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 解决了这个问题，因为现在从输入字段移动焦点时，列将变得不可编辑。

不会在控制器中编写任何方法。

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

a) 表格中的任何单元格都应该是可编辑的，但 表。(b) 表格的第一行，如果新添加到 GUI 中 对于接受来自用户的新输入，应免除 上述规则，即第一行的所有列都应该是可编辑的。

有很多解决方案，但这取决于您/您的需求。在这里，我想与您分享2个逻辑：

• 为用户输入的新对象添加新键，并使用此新键将它们与旧对象区分开来ng-readonly="x.new"新对象应具有以下键：{name:"", new: true}

• 存储主数组的长度，并使用它来区分输入的新对象ng-readonly="$index < mainlength"主长度如下所示：$scope.mainlength = angular.copy($scope.sensordata.length)(使用 angular.copy ) 见 http://plnkr.co/edit/zCcyPTG3EybL4IjsOpz4?p=preview