Question

我从JSON-Array获取数据列表。要过滤视图中的数据，请使用以下选择框。

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

在初始开始时，我看到所有结果，我可以过滤它。但是，如果我选择空值的第一个选项，我希望结果列表重置为初始值，将显示所有结果，但列表为空。怎么了。

这是我的控制器：

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;
            });

    });

});

这里是plunker：Plunk

Answer 1

首先，Angular过滤器不支持null值来返回所有数据，因此为了处理你必须根据需要编写一个方法来处理过滤器。所以我做了一些修改，使其成为您的要求 -

控制器中的

- 添加如下方法： -

 $scope.customFilter=function(item){

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

并且在视图中进行如下更改： -

 <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>

注意 - 此代码根据提供的Plunker。

在此处查找更新的Plunk Updated Plunk

angularjs ng-options首先过滤选项重置结果

1 个答案: