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>

角度代码

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

Answer 1

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

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

Answer 2

我不确定您的确切用例，但您可以使用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; }

使字段只读取角度

2 个答案: