読み取り専用テキストフィールドにエラーがあります

Question

同じモーダルフォームにリンクされているこの2つのボタンがあります。私が欲しいもの

<a ng-click="addUser(user)" class="btn"><i class="glyphicon glyphicon-edit"></i></a> 
<button type="button" class="btn btn-primary" ng-click="addUser(user)">Add New User</button> 

は、しかし、ユーザが第2ボタンをクリックすると、ユーザー名は変更することはできません、ユーザーが最初のボタンをクリックすると、ユーザーは自分のユーザー名を入力することができるということです。

<div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';" ng-readonly="readonly"> 
<label class="control-label" for="username">Username</label> 
    <input class="form-control" name="username" ng-model="user.username" required> 
    <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span> 
    </div> 

私は読み取り専用に設定しようとしましたが、そのようには動作しません。誰でも私を助けることができますか？

if (user) { 
       $dialogScope.title = "Update User"; 
       $dialogScope.hideField = true; 
       $dialogScope.readonly = true; 
       var copy = angular.copy(user); 
       $dialogScope.user = { 
        username: copy.username, 
        name: copy.name, 
        status: copy.status, 
        scope: copy.scope, 
       }; 
      } 

Answer 1

ng-readonly=""ディレクティブはここで正常に動作します。コントローラ内の変数からng-readonlyを設定します。

ボタンをクリックすると、それが真であると設定されます。 ボタン2をクリックするとそのvarをfalseに設定します。

入力フィールドには、ng-readonly=""フラグを使用する必要があります。

編集 - Plunker発揮します

https://plnkr.co/edit/b5dYYT4HEYXE2Es9PUce?p=preview