CODEWITHSUNDEEP
angularjsng-options
hydrococcus
hydrococcus

Reputation: 487

angularjs ng-options filter first Option reset results

i get a list of data from JSON-Array. To filter the data in the view i use the following select-box.

<select class="form-control" ng-model="obj.cookingType" ng-options="type for type in uniqueTypes">
   <option value="">Kochty</option>
</select>

On inital start i see all results and i can filter it. But if i choose the first option with the empty value i expected that the result-list ist reset to initial an all results will be displayed, but the list is empty. Whats wrong.

Here is my Controller:

potatoApp.controller('potatoCtrl', function($scope, $http){

    var jsonPath = 'data.json';
    $http.get(jsonPath).then(function(response){

        $scope.potatoData = response.data;

        // Kochtypen als Object
        $scope.typesArr = [];
        for(var i = 0; i < $scope.potatoData.length; i++){
            for(var k = 0; k < $scope.potatoData[i].typ.length; k++){
                $scope.typesArr.push($scope.potatoData[i].typ[k]);
                }
            }   
        $scope.uniqueTypes = $scope.typesArr.filter(function(item, index){
            return $scope.typesArr.indexOf(item) == index;
            });

    });

});

here is the plunker: Plunk

Upvotes: 0

Views: 379

Answers (1)

Viplock
Viplock

Reputation: 3319

First of all Angular filter does not support null value to return all the data, So for handling that you have to write a method for that to handle the filter according to the requirement. So I made some changes to make it work as your requirement-

in Controller - Add a method like :-

 $scope.customFilter=function(item){

        if(item===null){
            return "";
        }
        else{
            return item;
        }
    }

And in view make changes like:-

 <tr class="potato-item" ng-repeat="potatos in potatoData | filter: customFilter(obj.cookingType) | filter: customFilter(obj.pickingType)">
                <td><strong>{{potatos.name}}</strong></td>
                <td>{{potatos.herkunft}}</td>
                <td>{{potatos.bluete}}</td>
                <td>{{potatos.knolle}}</td>
                <td>{{potatos.schale}}</td>
                <td>{{potatos.ernte|arrayToList}}</td>
                <td>{{potatos.ertrag}}</td>
                <td>{{potatos.geschmack}}</td>
                <td>{{potatos.typ|arrayToList}}</td>
       </tr>

Note-This code is according to the Plunker provided .

Find Updated Plunk here Updated Plunk

Upvotes: 1

Related Questions