如何在angularjs中单击它时激活html元素？

当我点击任何html元素时，我希望它保持活动状态，请参阅演示，在下面的演示中，如果我点击了任何不活动的html，它将变为活动状态，或反之亦然。
DEMO 如何在angularjs中单击它时激活html元素？

<div class="wrapper col-md-12 col-sm-12"> 
    <a title="week? category" ng-model="week" class="tag">week</a> 
    <a title="week? category" ng-model="month" class="tag">month</a> 
    <a title="week? category" ng-model="year" class="tag">year</a> 
    </div>

来源

2016-03-08 Guest

你SH请使用ng-class在您的DOM上点击设置一个类，因此还需要使用ng-click来调用功能来设置活动菜单。不需要在锚标签中使用ng-model。

可以试试

在HTML：

<div ng-app="myApp" ng-controller="myCtrl"> 
     <div class="wrapper col-md-12 col-sm-12"> 
     <a title="week? category" class="tag" ng-class="{selected:selectedType == 'week'}" ng-click="makeActive('week')">week</a> 
     <a title="week? category" class="tag" ng-class="{selected:selectedType == 'month'}" ng-click="makeActive('month')">month</a> 
     <a title="week? category" class="tag" ng-class="{selected:selectedType == 'year'}" ng-click="makeActive('year')">year</a> 
     </div> 
    </div>

在控制器：

$scope.selectedType= '' ;// initially empty 

$scope.makeActive = function(getName) { 
    $scope.selectedType = getName; 
}

和CSS：选择添加另一个类

.tag:hover, .selected { 
     background-color: red; 
     border-color: red; 
}

来源

2016-03-08 19:33:20

的基本思想是为具有范围变量，将节省被单击的按钮（通过ng-click属性）和有条件地分配一个css类（通过ng-class属性）匹配链接。

HTML文件：

<div ng-app="myApp" ng-controller="myCtrl as vm"> 
    <div class="wrapper col-md-12 col-sm-12"> 
    <!-- 
     when you click the link, it will set $scope.type to the define type 
     ('week' in the first case), 
     we then compare $scope.type with some hardcoded value to set the 
     class and change the css properties accordingly) 
     Of course, you could extract this to a $scope method 
    --> 
    <a title="week? category" ng-class="{active: vm.type=='week'}" ng-click="vm.type = 'week'" class="tag">week</a> 
    <a title="week? category" ng-class="{active: vm.type=='month'}" ng-click="vm.type = 'month'" class="tag">month</a> 
    <a title="week? category" ng-class="{active: vm.type=='year'}" ng-click="vm.type = 'year'" class="tag">year</a> 
    </div> 
</div>

的Javascript：

app.controller('myCtrl', function($scope) { 
    $scope.type = null; 
});

的CSS（为active类）：

.tag:hover, .active { 
    background-color: red; 
    border-color: red; 
}

见Forked plknr

来源

2016-03-08 19:20:04 cl3m

如何在angularjs中单击它时激活html元素？

回答

相关问题