以角度只讀字段

我正在製作一個表單，用戶可以通過單擊添加更多按鈕來添加更多字段。爲此，我正在使用ng-repeat，並且當用戶單擊添加更多按鈕時，一個字段將被推送到ng-repeat結果中的數組中，並放入另一個字段中。以角度只讀字段

現在對於某些情況ng-repeat數組可能包含一些字段，我想讓它們只讀，但如果用戶點擊添加更多按鈕，那麼該字段可以編輯。我的代碼：

HTML代碼

<div ng-repeat="field in ui_fields"> 
    <label for="Language">Field Name :</label><input class="form-control" type="text" ng-model="field.name"> 
    <label for="Language">Field type :</label> 
    <select class="form-control" ng-model="field.type"> 
     <option value="">Select field type</option> 
     <option value="timedate">Date & Time</option> 
     <option value="text">Text</option> 
    </select> 
</div>

角碼

$scope.add_extra_field = function(){ 
    $scope.ui_fields.push({ 
     name: "", 
     type: "" 
     }); 
    }

來源

2015-05-06 n.imp

什麼是可編輯規則？總是最後一個元素是editbale，直到添加新元素爲止。 – hansmaad

@hansmaad通過點擊添加更多按鈕不添加新的按鈕，那麼它可以編輯，只讀只適用於已存在於數組中的那些 –

哪一個操作使新元素成爲現有元素？點擊添加一個我可以編輯的新項目，而不是？什麼使這個項目只讀？ – hansmaad

使用一個額外的字段isreadonly在ui_fields陣列和ngReadOnly指令，如：

你的HTML：

<div ng-repeat="field in ui_fields"> 
    <label for="Language">Field Name :</label><input class="form-control" ng-readonly="field.isreadonly" type="text" ng-model="field.name"> 
    <label for="Language">Field type :</label> 
    <select class="form-control" ng-disabled="field.isreadonly" ng-model="field.type"> 
     <option value="">Select field type</option> 
     <option value="timedate">Date & Time</option> 
     <option value="text">Text</option> 
    </select> 
</div>

您的javascript：

$scope.add_extra_field = function(){ 
    $scope.ui_fields.push({ 
     name: "", 
     type: "", 
     isreadonly: false 
     }); 
    }

來源

2015-05-06 07:04:36

它工作得很好，但在選擇的情況下它將是'ng-disabled'而不是'ng-readonly'類型。 –

@ n.imp不客氣。更新了答案。 –

我不知道你的確切使用情況，但可以使用ngReadonly，使有條件的控制只讀。在這個例子中我做出了最後一排只讀：

http://plnkr.co/edit/sZhKsjWoFBh30ikKZeN8?p=preview

<input class="form-control" type="text" 
     ng-model="field.name" ng-readonly="$index < ui_fields.length - 1" />

編輯： 我叉，你用它來發送編輯以符合您的實際使用情況http://plnkr.co/edit/DT7oMAhkjGxGa1GRN5uP?p=preview

在保存功能數據到服務器，您可以設置上次保存的數據的索引。使用該指數作爲條件ngReadonly

<input class="form-control" type="text" 
     ng-model="field.name" ng-readonly="$index <= savedIndex" />

控制器：

$scope.add_extra_field = function(){ 
    $scope.ui_fields.push({ 
     name: "", 
     type: "" 
    }); 
    } 
$scope.save = function() { 
    // send to server 
    $scope.savedIndex = $scope.ui_fields.length -1; 
}

來源

2015-05-06 07:00:41 hansmaad

以角度只讀字段

回答

相關問題