0

我正在尝试使用 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>
4

2 回答 2

2

在 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}

演示

编辑

对于更少的代码，你可以使用这个：

      <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>

演示

于 2013-10-14T03:00:49.230 回答
0

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>

此外，您应该选择“No wrap in head”。在你的情况下，角度甚至没有开始。

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

另外，为了更好地了解这项工作的原理，您可以查看此线程 -有条件地应用课程的最佳方法是什么？

而且我不知道它是否适合您的目的，但您可以使用 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');
      };
于 2013-10-14T02:54:39.660 回答