如何在标记内点击切换标签文本和参数？

Question

标记：

<li ng-click="getTrendingOnType('date')">
     <button type="button" class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'date')}">New</button>
</li> 
<li ng-click="getTrendingOnType('geo')">
     <button type="button" class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'geo')}">Nearby</button>
</li>    
<li ng-click="getTrendingOnType(activeTab == 'score')">
    <button type="button " class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'score')}">A - Z</button>
</li>

如图所示，我有这3个列表项。我已在上面提供了所需的标记。我想将A-Z切换到Z-A，反之亦然。我不需要另一个按钮来实现此功能。我想在标记中只使用JS而不是这样做。任何想法???

提前谢谢你。此应用程序位于angularjs。

Answer 1

为什么不做这样的事情？

<li ng-click="getTrendingOnType(activeTab == 'score'?'reverse_score':'score')">
   <button type="button " class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'score' || activeTab == 'reverse_score')}">{{activeTab == 'reverse_score'?'Z - A':'A - Z'}}</button>
</li>

简短而简单。

Answer 2

你可以这样做，（不需要js）：

<li ng-init="activeTab = 'date'" ng-click="activeTab = 'date';getTrendingOnType('date')">
     <button type="button" class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'date')}">New</button>
</li> 
<li ng-click="activeTab = 'geo';getTrendingOnType('geo')">
     <button type="button" class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'geo')}">Nearby</button>
</li>    
<li ng-click="activeTab = 'score';getTrendingOnType(activeTab == 'score')">
    <button type="button " class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'score')}">A - Z</button>
</li>

Answer 3

<script src="~/Scripts/angular.min.js"></script>    
<script>
    var app = angular.module("ap", []).controller("c", function ($scope) {
        $scope.getTrendingOnType = function () { alert(); };
    });  
</script>

<div ng-app="ap" ng-controller="c">    
    <input type="button" ng-click="getTrendingOnType()">
    <ul>
        <li ng-c-lick="getTrendingOnType()">
            <button type="button" class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'date')}">New</button>
        </li>
        <li ng-click="getTrendingOnType('geo')">
            <button type="button" class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'geo')}">Nearby</button>
        </li>
        <li ng-click="getTrendingOnType(activeTab == 'score')">
            <button type="button " class="btn btn-default home_btn" ng-class="{'home_active': (activeTab == 'score')}">A - Z</button>
        </li>
    </ul>
</div>

Answer 4

您可以使用简单的css来实现它。将reverseText课切换到点击

上的按钮

＆＃13;

＆＃13;

.reverseText {
    direction: rtl;
    unicode-bidi: bidi-override;    
}

div {
    text-align: center;
}

＆＃13;

<div>A - Z</div>
<div class="reverseText">A - Z</div>

＆＃13;

＆＃13;

＆＃13;