以角度只读字段

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

以角度只读字段

回答

相关问题