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

时间:2017-07-04 05:28:20

标签: angularjs readonly-attribute

我从数据库服务器获取一些数据,并在我的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;
    };

当我执行上面的代码时,所有行的第一列都按预期变得不可编辑。但是当我向(通过在同一个控制器的另一个函数中的sensordata数组中添加新的空JSON对象)GUI添加新行时,该行的第一列是不可编辑的,不应该是第一列的情况。上述方法中的陈述。我无法弄清楚它为什么会发生。

4 个答案:

答案 0 :(得分:1)

SELECT * FROM hwidex7 WHERE `HWID`='3087793810' 这条线解决了我的问题。如果没有ng-model-options属性,只要在新添加的行中键入字符,第一列就变为不可编辑。使用ng-model-options,这个问题得到了解决,因为从输入字段移动焦点后,该列将变得无法使用。

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

答案 1 :(得分:1)

你可以尝试<?php $array=array(); function getCount($path){ $count=0; global $array; //$count=count(glob($path."/*")); foreach(new DirectoryIterator($path) as $fileInfo){ if($fileInfo->isDir()){ if($fileInfo->isDot()) continue; if(array_key_exists($fileInfo->getFilename(),$array)){ $array[$fileInfo->getFilename()] = array( 'is_file_directory' => 'file', 'count' => getCount($fileInfo->getPathname()) ); } else{ $array[$fileInfo->getFilename()] = array( 'is_file_directory' => 'directory', 'count' => getCount($fileInfo->getPathname()) ); } } else{ $array[$fileInfo->getFilename()] = array( 'is_file_directory' => 'file', 'count' => 0 ); $count++; } } return $count; } ?> 语句,它可以正确设置变量

if else

答案 2 :(得分:0)

  

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

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

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

    < / LI>
  • 存储主数组的长度,并使用它来区分输入的新对象ng-readonly="$index < mainlength",而mainlength类似于:$scope.mainlength = angular.copy($scope.sensordata.length)(使用angular.copy)请参阅{{3} }

答案 3 :(得分: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}}" />