0

AngularJS を使用して、単純なクリックから太字への効果を作成しようとしています。コントローラー スクリプトを使用しないことを望んでいますが、含まれているかどうかに関係なく、私のコードは機能しません。

angular マークアップを使用した 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 に答える