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

上記のコードを実行すると、すべての行の最初の列が期待どおりに編集できなくなります。しかし、(同じコントローラーの別の関数のセンサーデータ配列に新しい空の JSON オブジェクトを追加することによって) GUI に新しい行を追加すると、行の最初の列が編集できなくなります。上記のメソッドのステートメント。なぜそれが起こっているのか理解できません。

4

4 に答える 4

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 に答える