Question

我正在尝试使用AngularJS创建一个简单的点击粗体效果。我希望不要涉及任何控制器脚本，但包括或不包括，我的代码不起作用。

带有角度标记的HTML代码

<div ng-app="organHome">
    <dl class="sub-nav" ng-controller="inModalSwitchCtrl">
        <dd ng-class="content:bold"><a ng-click="switchContent()" ng-model="content">Contents</a>
        </dd>
        <dd ng-class="comment:bold"><a ng-model="comment" ng-click="switchComment()">Comments</a>
        </dd>
    </dl>
</div>

我的js代码：

angular.module('organHome', [])

    .controller('inModalSwitchCtrl', function ($scope) {
    $scope.content = true;
    $scope.comment = false;

    $scope.switchContent = function ($scope) {
        $scope.content = true;
        $scope.comment = false;
    };

    $scope.switchComment = function ($scope) {
        $scope.comment = true;
        $scope.content = false;
    };
});

以下是关于小提琴的例子

http://jsfiddle.net/qHkWA/

我知道它一定是非常新秀，但我被困住了。有什么帮助吗？

我最初的目标是最小化我的代码，希望完全没有controller.js。

如果无论如何只使用现有指令，我很乐意关注！

我的可怕和不工作的方法看起来像这样：

<dl class="sub-nav">
    <dd ng-class="'active':content"><a ng-click="content = true" ng-model="content">Contents</a></dd>
    <dd ng-class="'active':comment"><a ng-model="comment">Comments</a></dd>
</dl>

Answer 1

in html：

    <dd ng-class="{'bold':content}"><a ng-click="switchContent()" ng-model="content">Contents</a></dd>

    <dd ng-class="{'bold':comment}"><a ng-model="comment" ng-click="switchComment()">Comments</a></dd>

另外添加css：

  .bold {font-weight: bold}

DEMO

修改

对于更少的代码，您可以使用：

<div ng-app="organHome"> <dl class="sub-nav" ng-controller="inModalSwitchCtrl" ng-init="content=true"> <dd ng-class="{'bold':content}"><a ng-click="content=true">Contents</a></dd> <dd ng-class="{'bold': !comment}"><a ng-click="content=false">Comments</a></dd> </dl> </div>

DEMO

Answer 2

ng-class的简化语法是{value：expression}所以你的代码看起来像这样：

<dd ng-class="{bold:content}"><a ng-click="switchContent()" ng-model="content">Contents</a></dd>
<dd ng-class="{bold:comment}"><a ng-model="comment" ng-click="switchComment()">Comments</a></dd>

此外，您应该选择“没有头部包裹”。在你的情况下，角度甚至没有开始。

这是工作小提琴 - http://jsfiddle.net/qHkWA/3/

另外，为了更好地理解这项工作的方法，您可以查看此主题 - What is the best way to conditionally apply a class?

我不知道它是否适合您的目的，但您可以使用jquery的toggleClass简化整个代码 - http://jsfiddle.net/8kgMZ/3/：

 <dd class="bold"><a ng-click="toggleBold()">Contents</a></dd>
 <dd><a ng-click="toggleBold()">Comments</a></dd>

和控制器：

  .controller('inModalSwitchCtrl', function ($scope) {
      $scope.toggleBold = function() {
          angular.element(document).find('dd').toggleClass('bold');
      };

ng-class和ng-click无法正常工作

2 个答案: