Question

我有三个按钮，我按照过滤，文章，最新文章和受欢迎的文章以及只有一个视频的文章。我还在添加我还在活动按钮上添加一个项目符号：

  <a class="button button-icon" href="#" ng-click="articleFilter('siste')"><i class="ion-ios-circle-filled" ng-show="bulletpointSiste"></i> Siste
  </a>
  <a class="button button-icon" href="#" ng-click="articleFilter('video')"><i class="ion-ios-circle-filled" ng-show="bulletpointVideo"></i> Video
  </a>
  <a class="button button-icon" href="#" ng-click="articleFilter()"><i class="ion-ios-circle-filled" ng-show="bulletpointPopular"></i> Populært
  </a>

在控制器中，我检查单击了哪个按钮，将单击的按钮项目符号设置为true，然后通过调用函数doRefresh刷新视图：

$scope.articleFilter = function(button) {
if (button == "siste"){
  $scope.bulletpointSiste = true;
  $scope.bulletpointPopular = false;
  $scope.bulletpointVideo = false;
  $scope.articleType = 'all';
}
else if (button == "video"){
  $scope.bulletpointSiste = false;
  $scope.bulletpointPopular = false;
  $scope.bulletpointVideo = true;
  $scope.articleType = 'video';
}
else {
  $scope.bulletpointVideo = false;
  $scope.bulletpointSiste = false;
  $scope.bulletpointPopular = true;
  $scope.articleType = 'popular';
}

$scope.doRefresh();

};

函数doRefresh检查哪个项目符号为true，并将var articleType设置为正确的过滤器类型，然后我将其用于调用正确的服务函数。现在我需要为此添加另一个过滤器，所以我需要更改逻辑。我不确定最优雅的方法是什么，我可以在else if函数中添加另一个articleFilter语句：

    $scope.doRefresh = function (){
    var articleType = $scope.articleType ? $scope.articleType : 'all';

    ArticleService[articleType]().$promise.then(function(data){
       $scope.articles = data;
    }).finally(function() {
       $scope.$broadcast('scroll.refreshComplete');
    });
  };

我想知道是否有更优雅的方式将正确的bullet point设置为true：

if (button == "siste"){
      $scope.bulletpointSiste = true;
      $scope.bulletpointPopular = false;
      $scope.bulletpointVideo = false;
      $scope.articleType = 'all';
    }
    else if (button == "video"){
      $scope.bulletpointSiste = false;
      $scope.bulletpointPopular = false;
      $scope.bulletpointVideo = true;
      $scope.articleType = 'video';
    }
    else {
      $scope.bulletpointVideo = false;
      $scope.bulletpointSiste = false;
      $scope.bulletpointPopular = true;
      $scope.articleType = 'popular';
    }

Answer 1

我认为你只能使用一个变量bulletPoint：

$scope.articleFilter = function(button) { 
    $scope.bulletPoint = button;

    // articleType should be all when 'siste', so a bit different...
    if(button == 'siste') $scope.articleType = 'all';
    else $scope.articleType = button;
}

您可以在HTML中更改ng-show条件：

<a ng-click="articleFilter('siste')"><i class="ion-ios-circle-filled" ng-show="bulletPoint == 'siste'"></i> Siste</a>
<a ng-click="articleFilter('video')"><i class="ion-ios-circle-filled" ng-show="bulletPoint == 'video'"></i> Video</a>
<a ng-click="articleFilter('popular')"><i class="ion-ios-circle-filled" ng-show="bulletPoint == 'popular'"></i> Popular</a>

Answer 2

如果只有一颗子弹可见，那么这个呢？

<a class="button button-icon" href="#" ng-click="articleFilter('all')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('all')"></i> Siste
  </a>
  <a class="button button-icon" href="#" ng-click="articleFilter('video')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('video')"></i> Video
  </a>
  <a class="button button-icon" href="#" ng-click="articleFilter('popular')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('popular')"></i> Populært
  </a>

-

$scope.articleFilter = function(button) {
    $scope.articleType = button;
}

$scope.showBulletPoint = function(which) {
    return $scope.articleType == which;
}

请记住定义默认articleType。

Answer 3

没有必要使用这么多条件，您可以使用名称和唯一值为导航创建一个项目数组。

＆＃13;

var app = angular.module('app',[]);

function MyCtrl($scope) {

    // Holds the active state
    $scope.active = "all";
    
    $scope.filter = [
      { n: "Siste", v: "all"},
      { n: "Video", v: "video"},
      { n: "Popular", v: "popular"}
    ];
  
    $scope.articleFilter = function(typ){
      // Update state

      $scope.active = typ;
      console.log(typ);

      // call service
    }
  
}

＆＃13;

a > i{
  display: none;
}

a.active > i{
  display: inherit;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<div ng-controller="MyCtrl">
  
 <a ng-repeat="f in filter track by $index"
    ng-class="{'active': f.v == active}"
    ng-click="articleFilter(f.v)"
    href>
    <i>+</i> {{f.n}}
  </a>
  
</div>
  
</body>

＆＃13;

Angular - 检查哪个语句为true，并根据该语句创建变量

3 个答案: