javascript - 使字段只读成 Angular

Question

我正在制作一个表单，用户可以通过单击“添加更多”按钮来添加更多字段。为此，我正在使用 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>

Angular 代码

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

Answer 1

在 ui_fields 数组和 ngReadOnly 中使用额外字段 isreadonly指令，例如:

您的 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
      });
    }