1

I have a select drop down on the page. Suppose it has 3 items, orange, banana, mango. There is a button to add a new item to the list. Consider orange is selected on the drop down currently, and when I click on the add new button and try to add a new fruit item say peach what i see is peach is repeated twice. The existing selected Orange is now replaced with peach as well. I am using Angular.copy as given below, why is this being repeated ? The list of fruit is coming from the server I have a fruits arraylist in my action and parsed as json to display on the page.

<select id="fruitSelect" ng-options="fruit.description for fruit in fruits" ng-model="selectedFruit" ng-change="fruitsClicked()"> </select>

And I have a button, on click of this button a modal is opened and asks user to give a name to save fruit to the list.

<button type="button" ng-click="saveFruit()">Save</button>

The JS controller code:

$scope.saveFruit= function() {
        var length = $scope.fruits.push({
          description: angular.copy($scope.form.newFruit)
         });
      $scope.selectedFruit= angular.copy($scope.fruits[length-1]);
    };

I want to select the newly added fruit in the drop down, so for ng-model selectedFruit I am setting it to the angular copy value of the last fruit in the saved search. This works fine, but it creates a duplicate. It replaces orange which was previously selected with peach in my case.

2
  • Create demo that replicates this. We can't see $scope.form. Also not clear why you use copy twice and don't just create copy object once and make that equal to selectedFruit. Also not clear what relationship is between savedSearches and fruits arrays
    – charlietfl
    Aug 10, 2015 at 18:59
  • sorry that was a copy/paste error. Changed it to fruits. I will try to create a demo Aug 10, 2015 at 19:06

1 Answer 1

2

I created a JSfiddle here that I believe have the answer.

You don't need to use angular.copy on this case. This function is used mainly to copy objects that javascript would otherwise only copy the pointer.

From what you provided I guess you might be calling the function to add the fruit to your array twice, e.g. ng-submit on the form and ng-click in the submit button of the same form.

Update:

Updated the JSfiddle. When changing the selected option you just need to pass to the ng-model which index of your array will be the selected.

3
  • Thanks for the JSfiddle. For example orange is selected in drop-down and when i add peach and click on don't add duplicate, peach will get added to the drop down, and i also want peach to be displayed/selected in drop down as well. How to do that? Aug 10, 2015 at 19:25
  • @MaverickAzy Updated the answer with a new fiddle, please check it out. Aug 10, 2015 at 19:41
  • does make sense using copy if plan on use form object again to pass new item to array
    – charlietfl
    Aug 10, 2015 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.