2015-09-23 44 views
0

我已经尝试了大部分的SO答案,以识别angular.js中的唯一值(我是新手),但我的问题是试图将这些转换为选择表单并为此对表中的数据有一个过滤器。角度js过滤器/搜索和唯一选择

本质上,我有一些数据,我想要显示它在一个表中,并在表头中有一个选择下拉列表中的唯一值的数据,并能够过滤所选值显示的表。

我试图使用

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> 

,然后将表数据本身

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

结果,产生这一点,但值设置不正确,因此过滤不会返回任何内容(因为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列/字段过滤,但我只是在这里包括一个例子。

有人可以帮助我指出正确的方向。感谢

编辑:

我看到这个指令可能是有用的,但在地图上键 - >值是一样的,是有一个更快/更简单的方法?

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 
    } 
}; 
+0

仍在挣扎着与此。以下是使用上述方法的输出,过滤器似乎工作不错,但我看不到任何在选择选项的值就知道选择什么'场\t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t' – ChelseaStats

回答

0

原来这个工程

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

坚持一个foreach看起来在每个列的一个CSV文件中。

即完全excel风格的过滤与任何csv通过英寸