2

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

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

为此，我编写了以下代码。

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

当我执行上面的代码时，所有行的第一列都按预期变得不可编辑。但是，当我向 GUI 添加新行（通过在同一控制器的另一个函数中的 sensordata 数组中添加新的空 JSON 对象）GUI 时，该行的第一列变得不可编辑，这不应该是第一个 if上述方法中的声明。我无法弄清楚为什么会这样。

4

4 回答 4

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;
};
于 2017-07-04T05:54:28.627 回答
1

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

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

于 2017-07-07T10:15:31.240 回答
0

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

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

  • 为用户输入的新对象添加新键，并使用此新键将它们与旧对象区分开来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

于 2017-07-04T07:04:47.733 回答
0

您可以将条件直接放在 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}}" />
于 2017-07-04T07:13:46.470 回答