angularjs ng-options 过滤第一个 Option 重置结果

Question

我从 JSON-Array 中获取数据列表。要过滤视图中的数据，我使用以下 select-box.

<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过滤器不支持return所有数据的null值，所以为了处理你必须根据要求编写一个方法来处理过滤器。所以我做了一些更改以使其符合您的要求-

在Controller中-添加一个方法如：-

 $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 过滤第一个 Option 重置结果

angularjs ng-options filter first Option reset results

angularjs

ng-options