How to remove array item property using AngularJs

Question

Here is my AngularJs Code

vm.selectedReviewer = [];
        // selected on a given reviewer by name
         function reviewerSelect(reviewer) {
            var idx = vm.selectedReviewer.indexOf(reviewer);
            // is currently selected
            if (idx > -1) {
                vm.selectedReviewer.splice(idx, 1);
            }
            // is newly selected
            else {              
                vm.selectedReviewer.push(reviewer);
            }
         }

Html code

<div>
                        <h3>With a simple array as input data</h3>                         
                        <div class="row">
                            <div class="col-md-6">                                   
                                <div class="form-group" ng-repeat="reviewer in vm.reviewerList">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="selectedFruits[]" value="{{reviewer}}" ng-checked="vm.selectedReviewer.indexOf(reviewer) > -1" ng-click="vm.reviewerSelect(reviewer)"> {{reviewer.Name}}                                       
                                        <input type="text" name="TotalReviewMargin" ng-model="reviewer.ReviewCollectMargin">
                                        <input type="text" name="TotalReviewMargin" ng-model="reviewer.PerReviewCost">
                                    </label>
                                </div>
                            </div>                           
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h4>selected Reviewer</h4>
                                <pre>{{vm.selectedReviewer|json}}</pre>
                            </div>                               
                        </div>
                    </div>

Here is my Output

All are working well but I want remove some item property from selected item. When the checkbox is checked my expected output Click Here. When the item push on array this time some property not pushing in array. How to do this?

Answer 1

From What I understood, you needed to delete some property of an object. Take a look at this fiddle.

You can create a deep copy of object so that it doesn't affect the reviewerList using:

  var tempObj = JSON.parse(JSON.stringify(reviewer));
  delete tempObj.TotalReviewMargin;
  this.selectedReviewer.push(tempObj);

So, although you have

this.reviewerList = [
  {name: "test", ReviewCollectMargin: 10, PerReviewCost: 12,TotalReviewMargin : 0},
  {name: "test2", ReviewCollectMargin: 10, PerReviewCost: 12 ,TotalReviewMargin : 0},
  {name: "test3", ReviewCollectMargin: 10, PerReviewCost: 12,TotalReviewMargin : 0}
];

On checkbox click, you get:

[
 {
  "name": "test",
  "ReviewCollectMargin": 10,
  "PerReviewCost": 12
 }
]

Note the TotalReviewMargin property is missing in selected value