Question

出于导航的目的，我正在尝试使用触发功能的按钮。

此功能必须先：

- 重定向到#/

然后：

- 过滤此视图中存在的ng-repeat。

这是我尝试过的但没有运气。

<li><a ng-click="shopsingle()">Shop</a></li>

和JS：

$scope.shopsingle = function(){
  $location.path("/");

  setTimeout(function () {
    $scope.$apply(function(){
      $scope.filterExpr = {"shop" : true};
      console.log($scope.filterExpr);
    });
  }, 300);
};

它会重定向到所需的路径，其中会显示完整的重复列表，但它不会应用过滤器，并且控制台也会为空。

关于视图和路由，我在2个不同的视图中使用相同的模板，并在观看$routeParams时显示/隐藏部分if：

.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "home.htm",
      controller : "mainCtrl"
  })
  .when('/:name',
      {
          templateUrl:"home.htm",
          controller:"mainCtrl"
      })
  .otherwise({redirectTo:'/'});
})

控制器观察：

$scope.name = $routeParams.name;

$scope.$watch(function() { return $scope.name; }, function(newVal) { 
  if (!newVal){
    $scope.single = false;
  } else{
    $scope.single = true
  };
  $scope.newname = newVal;
  $scope.chosenexhibitor = $filter("filter")($scope.images, {'name':$scope.newname}, true);
}, true);

观点：

<!-- MAIN PAGE -->

<div ng-hide="single" id="tiles" masonry='{ "transitionDuration" : "0.15s" , "itemSelector" : ".tile"}'>
  <div masonry-tile ng-repeat="item in images | filter:filterExpr" class="tile col-xs-3 col-md-3">
    <a href="#/{{item.name}}">            
       <img class="img-fluid" ng-src="img/{{item.link}}">
    </a>
  </div>
</div> 

<!-- SINGLE PAGE -->

<div class="row flexing" ng-show="single">
    <div class="col-md-12">
        <h1>{{chosenexhibitor[0].name}}</h1>

        <img ng-src="img/{{chosenexhibitor[0].link}}">

        <a class="back" href="#/">Back</a>
    </div>
</div>

我错过了什么？

设置$ location，然后使用AngularJS进行过滤

0 个答案: