html - Filtering a dropdown in Angular -
i have requirement select html element can duplicated multiple times on page. options these select elements come master list. of select elements can show of items in master list have not been selected in of other select elements unless duplicated.
when select new item duplicated select element, seems select option after 1 selected though model still has correct 1 set. seems happen in ie11 , happens in chrome.
i realize sounds convoluted, created jfiddle example.
try these steps:
- select bender
- click duplicate link
- select fry (on duplicated select)
- notice 1 selected leela model still has fry (id:2) 1 selected
can tell me how might around or might doing wrong?
here relevant angular code:
myapp.controller('ctrl', function ($scope) { $scope.selectedids = [{}]; $scope.allids = [{ name: 'bender', value: 1}, {name: 'fry', value: 2}, {name: 'leela', value: 3 }]; $scope.dupdropdown = function(currentdd) { var newdd = angular.copy(currentdd); $scope.selectedids.push(newdd); } }); angular.module('appfilters',[]).filter('ddlfilter', function () { return function (allids, currentitem, selectedids) { //console.log(currentitem); var listtoreturn = allids.filter(function (anidfrommasterlist) { if (currentitem.id == anidfrommasterlist.value) return true; var arethereany = selectedids.some(function (aselectedid) { return aselectedid.id == anidfrommasterlist.value; }); return !arethereany; }); return listtoreturn; } });
and here relevant html
<div ng-repeat="aselection in selectedids "> <a href="#" ng-click="dupdropdown(aselection)">duplicate</a> <select ng-model="aselection.id" ng-options="a.value a.name in allids | ddlfilter:aselection:selectedids"> <option value="">--select--</option> </select> </div>
hi have made small change in dupdropdown function follows
$scope.dupdropdown = function(currentdd) { $scope.selectedids.push({}); }
please check if works you.
Comments
Post a Comment