Remove (splice) value from one scope/ng-options, while maintaining values in another

Question

I have a dropdown list populated by one scope and the same list displayed using another scope. When I select something from the dropdown I want to hide/remove it from the display list, but keep the full list in the dropdown.

I have a JS fiddle started: https://jsfiddle.net/mfzbk8nv/6/

Fiddle: enter link description here

Right now what's happening is that it removed the first letter in the display list and not the one I want to remove. Second, it removes from both the dropdown and the displaylist.

Any help appreciated!

My HTML:

<div  ng-app="myApp" ng-controller="myController">
    <select ng-model="mySel" ng-options="i for i in list2" ng-change="removeIt(mySel)" ></select>

    <ul style="list-style:none;">
        <li ng-repeat="item in list1">
            {{item}}
        </li>
    </ul>
</div>

My JS:

var app = angular.module('myApp', [])
app.controller('myController', function ($scope) {
    $scope.data = {};
    var arr = ['a', 'b', 'c', 'd', 'e']
    $scope.list1 = arr;
    $scope.list2 = arr;

    $scope.removeIt = function(i){    
        $scope.list1.splice(i,1)        
    }    
})

Here's the fiddle: https://jsfiddle.net/mfzbk8nv/6/ – crowsfeet Oct 28 '15 at 18:21 — crowsfeet, Oct 28 '15 at 18:21

score 1 · Accepted Answer · answered Oct 28 '15 at 18:31

1

ng-options does not have an $index, that's only within ng-repeat

You have to create your own way of indexing the ng-options, by grouping things and creating your own.

<select ng-model="mySel" 
    ng-options="index as mySel for (index, mySel) in list2"
    ng-change="removeIt(mySel)" />

Now mySel will be this index that's created no each iteration.

jsFiddle Updated Demo here

answered Oct 28 '15 at 18:31

Mark Pieszak - Trilon.io

61,391
14
82
96

What if I wanted to remove it, not by index, but by actual text selected? – crowsfeet Oct 28 '15 at 18:52
You'd have to just make a `for()` loop, compare the text to each item in the array, and when it matches, delete that index (from the for loop) `arr.splice(i, 1)` from your array. @crowsfeet – Mark Pieszak - Trilon.io Oct 28 '15 at 19:04

score 0 · Answer 2 · answered Oct 28 '15 at 18:31

0

Both list1 and list2 are reference the same array arr. So when you change one of them,you change the other one. Try to duplicate it

var dup_array = original_array.slice

answered Oct 28 '15 at 18:31

omer727

7,117
6
26
39

Remove (splice) value from one scope/ng-options, while maintaining values in another

2 Answers2