使字段只读取角度

Question

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.

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 :

HTML code

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

Answer 1

Use an extra field isreadonly in ui_fields array and the ngReadOnly directive, like :

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

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

Answer 2

I'm not sure about your exact use case, but you can use ngReadonly to make controls conditionally read only. In this example I made the last row readonly:

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

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

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