Question

我想按照此link中显示的步骤更改使用angularjs的html实体的类，但它不起作用。我有两个按钮，我想在点击时显示为活动状态，因此我有一个＆＃34;活动＆＃34;为此而上课。我想使用angularjs动态更改类。

HTML

<div class="tab-btn" >
    <input type="button"   ng-class="active"  ng-show="about"   ng-click="show==1" value="About" />
    <input type="button" ng-show="help"    ng-click="show = 2" value="Help"/>    
    <input type="button" ng-show="Info"    ng-click="show = 3" value="Special" />        
    <input type="button" ng-show="Service" ng-click="show = 4" value="Service" />            
    <div style="clear: both"></div>
</div>

的Javascript

$scope.active = '';
$scope.show = 1;
$scope.show1 = function(){

    $scope.show2 = false;
    $scope.show3 = false;
    $scope.show4 = false;

    if ($scope.active.length === 0) {
        $scope.active = 'active';
    } else {
        $scope.active = '';
    }                 
};

Answer 1

您正在错误地使用ng-class：它的表达式包含一个对象，其中每个属性都是一个类，值是一个表达式，用于评估在真实时有条件地应用该类。

如果变量ng-class="{active: isActive: inActive: !isActive}"是真值，则active会应用isActive类，否则它将应用类inActive。

对于您的用例，它取决于您的应用程序的更广泛范围以及如何生成按钮，但我过去采用了不同的方法。

如果为按钮定义模型，包括活动标记，禁用标记，标题等，则可以更轻松地控制按钮状态。

这将允许您动态添加按钮，更改文本，启用按钮等。如果您为导航部分提供自己的控制器并通过服务将其暴露给您的应用程序的其余部分，那么更是如此，但这可能有点得多。

希望这个小提琴可以帮助http://jsfiddle.net/p66mv6tn/1/

如何在angularjs中动态更改类

1 个答案: