javascript 以角度使字段只读
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30069342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make fields readonly in angular
提问by n.imp
I am making a form where user can add more fields by clicking on add more button. for that I am using ng-repeat and when user click on add more button one field is pushed to array in ng-repeat results into one more field.
我正在制作一个表单，用户可以通过单击添加更多按钮来添加更多字段。为此，我正在使用 ng-repeat，当用户单击“添加更多”按钮时，会将一个字段推送到 ng-repeat 结果中的另一个字段中的数组。
Now for some cases ng-repeat array may include some fields , I want to make them readonly but if user click on add more button then that field can be editable. My code :
现在在某些情况下 ng-repeat 数组可能包含一些字段，我想让它们只读，但如果用户单击添加更多按钮，则该字段可以编辑。我的代码：
HTML code
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 code
角码
$scope.add_extra_field = function(){
$scope.ui_fields.push({
name: "",
type: ""
});
}
回答by whereDragonsDwell
Use an extra field isreadonlyin ui_fieldsarray and the ngReadOnlydirective, like :
isreadonly在ui_fields数组和ngReadOnly指令中使用额外的字段，例如：
Your HTML:
你的 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>
Your javascript:
你的javascript：
$scope.add_extra_field = function(){
$scope.ui_fields.push({
name: "",
type: "",
isreadonly: false
});
}
回答by hansmaad
I'm not sure about your exact use case, but you can use ngReadonlyto make controls conditionally read only. In this example I made the last row readonly:
我不确定您的确切用例，但您可以ngReadonly用来使控件有条件地只读。在这个例子中，我将最后一行设为只读：
http://plnkr.co/edit/sZhKsjWoFBh30ikKZeN8?p=preview
http://plnkr.co/edit/sZhKsjWoFBh30ikKZeN8?p=preview
<input class="form-control" type="text"
ng-model="field.name" ng-readonly="$index < ui_fields.length - 1" />
Edit:I forked to match your actual use case http://plnkr.co/edit/DT7oMAhkjGxGa1GRN5uP?p=preview
编辑：我分叉以匹配您的实际用例http://plnkr.co/edit/DT7oMAhkjGxGa1GRN5uP?p=preview
In the save function you use to send the edited data to the server you can set the index of last saved data. Use this index as condition for ngReadonly
在用于将编辑数据发送到服务器的保存功能中，您可以设置上次保存数据的索引。使用此索引作为条件ngReadonly
<input class="form-control" type="text"
ng-model="field.name" ng-readonly="$index <= savedIndex" />
Controller:
控制器：
$scope.add_extra_field = function(){
$scope.ui_fields.push({
name: "",
type: ""
});
}
$scope.save = function() {
// send to server
$scope.savedIndex = $scope.ui_fields.length -1;
}
