bs-select中的ng-options过滤器无法访问服务范围变量

时间:2014-11-28 12:18:21

标签: angularjs angularjs-service ng-options angular-strap angular-filters

更新:Plnkr http://plnkr.co/edit/iYmShY6uDaYxktyCYolk?p=preview

我使用以下代码创建了angularstrap下拉列表。

{{userService.current.id}} <!-- Outputs correct id (1) -->
<button 
ng-if="userService.current.id || !loginService.isLoggedIn" type="button" class="btn btn-default" 
ng-model="profileService.current" data-placeholder="Profiles" 
ng-options="profile.title for profile in profileService.profiles | 
filter:{userId: userService.current.id}" bs-select>
   Action <span class="caret"></span>
</button>

ng-options中的过滤器未按预期运行/未过滤。如果我们将过滤器更改为以下内容:

filter:{userId: 1}

它按预期工作。所以我假设我的情况有些不对劲,但是我开始感到有点迷失,因为我仍然可以在示例的第一行打印正确的id。 / p>

范围有问题吗?或者有什么关于过滤器我做错了吗?

1 个答案:

答案 0 :(得分:0)

最后经过无尽的时间,它得到了解决。我这样做的方法是简单地使用$ filter从控制器过滤。如果有另一个更好/更合适的分辨率,我想听听。当filter指令已经存在时,将过滤器移动到控制器中会有点不对。

http://plnkr.co/edit/iYmShY6uDaYxktyCYolk?p=preview

HTML:

    <button type="button" class="btn btn-default" 
ng-model="profileService.current" data-placeholder="Profiles" 
ng-options="profile.title for profile in filteredProfiles" bs-select="">
                Action         <span class="caret"></span>
          </button>

过滤器:

.filter('filterProfiles', function() {
  return function(id, profiles) {
  var filteredProfiles = [];
    angular.forEach(profiles, function(value, key) {
      if (value.userId == id) {
        filteredProfiles.push(value);
      }
    });
    return filteredProfiles;
  }
});

控制器:

.controller('HeaderCtrl', function($scope, $filter, userService, profileService) {
$scope.$watch('userService.current', function(newVal, oldVal) {
    $scope.filteredProfiles = $filter('filterProfiles')($scope.userService.current.id, $scope.profileService.profiles);
  });
});