angular js filter/search 和唯一选择

Question

我已经尝试了大多数 SO 答案来识别 angular.js 中的唯一值（我是新手），但我的问题是试图将这些变成 select 形式并为此对 table.

中的数据进行过滤

基本上我有一些数据，我想在 table 中显示它，在 table header 中有一个 select 下拉列表，其中包含唯一值的数据，并能够过滤值 selected.

显示的 table

我正在尝试使用

app.filter('unique', function () {
return function ( collection, keyname) {
var output = [],
    keys = []
    found = [];

if (!keyname) {

    angular.forEach(collection, function (row) {
        var is_found = false;
        angular.forEach(found, function (foundRow) {

            if (foundRow == row) {
                is_found = true;                            
            }
        });

        if (is_found) { return; }
        found.push(row);
        output.push(row);

    });
}
else {

    angular.forEach(collection, function (row) {
        var item = row[keyname];
        if (item === null || item === undefined) return;
        if (keys.indexOf(item) === -1) {
            keys.push(item);
            output.push(row);
        }
    });
}

return output;
};
});

我的 html 看起来像这样

    <th> Number:        
    <br/>
     <select ng-model="search.number"  
             ng-options="row.numberfor row in data | unique:'number'">
    <option value=""> </option>
    </select>
    </th>

然后是 table 数据本身

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="r in data | filter:{ number: search.number,  }">
        <td> {{r.number}}</td>
        </tr>
        </tbody>
        </table>

输出生成了这个，但是值设置不正确，所以过滤 returns 什么都没有（因为 0,1,2,3.. 没有匹配的数据行）。

<select ng-model="search.number" 
ng-options="row.numberfor row in data | unique:'number'"  
class="ng-pristine ng-valid">
<option value="" class=""> </option>
<option value="0">1023 456789</option>
<option value="1">1024 456789</option>
<option value="2">1025 456789</option>
<option value="3">1023 111999</option>
<option value="4">1024 111999</option>
</select>

我也试过这个独特的功能

/*          
app.filter('unique', function() {
return function(input, key) {
    var unique = {};
    var uniqueList = [];
    for(var i = 0; i < input.length; i++){
        if(typeof unique[input[i][key]] == "undefined"){
            unique[input[i][key]] = "";
            uniqueList.push(input[i][key]);
        }
    }
    return uniqueList;
};
}); */

但没有快乐。我不得不将 [key] 添加到此行 uniqueList.push(input[i][key]); 只是为了让下拉列表中显示的值，但我似乎无法控制该下拉列表中选项的值。

我的控制台没有错误。

我有 10 个 columns/fields 可以过滤，但我只在此处包含一个示例。

有人能帮我指明正确的方向吗？谢谢

编辑：

我看到这个指令可能有用，但是当映射键->值相同时，有 quicker/easier 方法吗？

app.directive('mySelect', [function () {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: '<select ng-options="key as value for (key, value) in myMap" ng-transclude></select>',
    link: function postLink(scope, element) {
      scope.myMap = {"1":"1","2":"2","3":"3"}; 
   // e.g. hashmap from server
    }
};

Answer 1

事实证明这有效

<select ng-model="search.<?php echo $column; ?>" 
        ng-options="v for (k, v) in data 
                | orderBy:'<?php echo $column;?>' 
                | unique:'<?php echo $column;?>' ">
        <option value="">select</option>
</select>

卡在一个查看 CSV 文件中每一列的 foreach 中。

即使用传入的任何 csv 进行完整 excel 样式过滤。

angular js filter/search 和唯一选择

angular js filter/search and unique selects

select

filtering

angularjs