角度 - どのステートメントが真であるかチェックし、そのステートメントに基づいて変数を作成する

Question

私は、1つのビデオだけを持つものと同様に、私がフィルター、記事、最新の記事、 trueにクリックされたボタンの箇条書きを設定し、次のようにクリックされたボタン私がチェックし、コントローラで

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

、その後でビューを更新します。また、私はまた、アクティブなボタンに箇条書きを追加してい追加してい関数を呼び出す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は、どの箇条書きが真であるかをチェックし、正しいサービスタイプを呼び出すために、正しいフィルタタイプにvar articleTypeを設定します。今私はこれに別のフィルタを追加する必要があるので、私はロジックを変更する必要があります。私はこれを行うための最もエレガントな方法は何かわからない、私はarticleFilter関数に別のelse ifのステートメントを追加することができます：私は疑問に思って

$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 pointtrueに設定するいくつかのよりエレガントな方法がある場合：

$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; 
} 

そして、あなた：

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

何これについて、常に見える唯一の弾丸があるでしょうか？

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

は、私はあなたがbulletPointのために1つの変数のみを使用することができると思いますHTMLであなたのNG-ショーの条件を変更することができます。

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

非常に多くの条件を使用する必要はありません。名前と固有の値を持つnav用のアイテムの配列を作成するだけです。

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

a > i{ 
 
    display: none; 
 
} 
 

 
a.active > i{ 
 
    display: inherit; 
 
}

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