AngularJs - 在select控件中过滤掉重复项

Question

我有一个轴类型的选择列表，每个轴类型都具有前轴或后轴的类型属性。我似乎无法过滤掉“Front”和“Rear”的重复单词。

更新

HTML：

<select ng-model="axleType.Type" ng-options="type for type in uniqueTypes">  

控制器：

    $scope.axleTypes = API.GetAxleTypes();

    $scope.fixedAxleTypes = [
    { "$id": "1", "Description": "I beam, telescopic type shock absorbers", "Type": "Front", "Id": 1 },
    { "$id": "2", "Description": "Full-floating banjo housing", "Type": "Rear", "Id": 2 },
    { "$id": "3", "Description": "Something Else", "Type": "Rear", "Id": 2 },
    { "$id": "4", "Description": "I beam, telescopic type shock absorbers", "Type": "Front", "Id": 4 }
    ];

    // This Works
    $scope.uniqueTypes = _.uniq(_.pluck($scope.fixedAxleTypes, 'Type'));

    // This does not
    //$scope.uniqueTypes = _.uniq(_.pluck($scope.axleTypes, 'Type'));

    // This does not
    //$scope.uniqueTypes = _.uniq(_.pluck(API.GetAxleTypes(), 'Type'));

我很困惑。是的，API工作，我复制粘贴上面的数据        Chrome＆gt;网络＆gt;响应窗口

Answer 1

看到你在编辑中添加的错误，我确定原因就是我在评论中描述的内容，即在该表达式不能使用的上下文中使用过滤器的(axleType.Type)表达式被评估。由于你没有在过滤器实现中使用表达式，我相信你可以完全省略它。

Answer 2

我猜是API.GetAxleTypes();应该做一些异步任务，比如调用$http。 如果是这种情况，那么$scope.axleTypes将不是您正在寻找的数组类型。 GetAxleTypes看起来与此类似。

服务定义：

{
   uniqueaxleTypes:[],
   GetAxleTypes = function($http,..){
     var promise = $http({
       //config
     })
     promise.then(function(response){
       this.uniqueaxleTypes = _.uniq(_.pluck(response.data, 'Type'));
     })
   }
}

然后，如果将范围变量绑定到此uniqueaxleTypes，它将始终反映唯一值。

由于$scope.fixedAxleTypes是硬编码值，因此工作正常。