如何切换glyphicon图标类?

时间:2014-09-29 15:44:30

标签: javascript angularjs twitter-bootstrap-3 glyphicons

我正在使用AngularJs,Bootstrap 3.我想在我的页面上切换我的glyphicon图标。但我能够做到。我在stackoverflow问题here处跟踪了响应。 我不明白为什么我不能用toggle表达式显示glyphicon。

这是我的代码:

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.toggleIcon = false;

                $scope.sort = function (sortBy) {
        $scope.toggleIcon = !$scope.toggleIcon;
                  // sorting logic
                };
            } );
</script>
</head>

<body ng-app="myapp">

<div ng-controller="MyController" >
    <div class="row">
         Here the name to sort
        <a href="" ng-click="sort('name')">Name </a><span class="glyphicon" ng-class="{glyphicon-sort-by-alphabet': toggleIcon, 'glyphicon-sort-by-alphabet-alt': !toggleIcon}"></span>
    </div>
        <div class="row">
         Here the icon
        <a href=""><span class="glyphicon glyphicon-sort-by-alphabet"></span></a>

    </div>
    </div>

</body>
</html>

您可以在Plunker

上查看代码

谢谢。

0 个答案:

没有答案