CODEWITHSUNDEEP
angularjsfilter
PeeH
PeeH

Reputation: 1

angular filtered dropdown model not updating

I'm trying to update a filtered dropdowns(combobox) model on click of a button. The model value is changing but dropdown still shows an empty selected option. If I remove the filter everything works as it should (without filtering of course).

Plunker: http://plnkr.co/edit/a48JSEiiATrkcQKxfJjx?p=preview

JS:

$scope.tasks = [
    {name:'Task1', taskid: 1, custid: 2},
    {name:'Task2', taskid: 2, custid: 2},
    {name:'Task3', taskid: 3, custid: 3}
    ];

  $scope.myinfo = {};
  $scope.updateinfo = {name:'Cust Name', custid: 3, taskid: 3};

  $scope.setMyinfo = function(){
    $scope.myinfo = $scope.updateinfo;
  };
});

app.filter('taskFilter', function() {
  return function(input, criteria) {
    var result = [];
    for (var i = 0; i < input.length; i++) {
        if(input[i].custid == criteria || input[i].custid === undefined){
            result.push(input[i]);
        }
    }
    return result;
  }

HTML:

<button ng-click="setMyinfo()">Button</button>
    <br> <br>
    Filtered:
    <select ng-model="myinfo.taskid">
      <option>---</option>
      <option ng-repeat="task in tasks | taskFilter:myinfo.custid" value="{{task.taskid}}">{{task.name}}</option>
    </select>

    Unfiltered:
    <select ng-model="myinfo.taskid">
      <option>---</option>
      <option ng-repeat="task in tasks" value="{{task.taskid}}">{{task.name}}</option>
    </select>

  <br><br>
  Value: {{myinfo.taskid}}

Thanks you for helping!

Upvotes: 0

Views: 237

Answers (2)

Samir Das
Samir Das

Reputation: 1908

Please update code following line

if(input[i].custid == criteria || input[i].custid === undefined){

by 

 if(input[i].custid == criteria || input[i].custid === undefined || criteria == undefined){

Upvotes: 0

Luuk Skeur
Luuk Skeur

Reputation: 1940

pre-filter the list by key and value:

<div ng-repeat="(k,v) in filterCustId(tasks)">
    {{k}} {{v.pos}}
</div>

And on the Controller:

$scope.filterCustId = function(items) {
    var result = {};
    angular.forEach(items, function(value, key) {
        if (!value.hasOwnProperty('custid')) {
            result[key] = value;
        }
    });
    return result;
}

From: https://stackoverflow.com/a/14789258/4668696

Upvotes: 0

Related Questions