Javascript 将字段设置为角度只读

我正在制作一个表单，用户可以通过点击AddMore按钮添加更多字段。为此，我使用ng repeat，当用户单击addmore按钮时，一个字段被推到数组中，ng repeat结果被推到另一个字段中

现在，在某些情况下，ng repeat array可能包含一些字段，我想将它们设置为只读，但如果用户单击AddMore按钮，则该字段可以编辑。 我的代码：

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: ""
      });
    }

---

我不确定您的确切用例，但您可以使用使控件有条件地只读。在本例中，我将最后一行设置为只读：

控制器：

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

---

在

ui\u字段

数组和指令中使用额外字段

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>

---

可编辑的规则是什么？在添加新元素之前，最后一个元素始终是可编辑的？@hansmaad单击“添加更多”按钮不添加新元素，则该按钮可编辑，只读将适用于阵列中已存在的元素，而该操作会使新元素成为现有元素？单击添加我可以编辑的新项目，然后单击？是什么使此项成为只读的？@Hansmad我使用Python作为后端，因此当我从后端发送字段时，这些字段必须是只读的。thx运行正常，但在选择类型的情况下，将禁用

ng-readonly

，而不是

ng-readonly

。

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

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

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