1

ng-class基本的に、ボタンをdivに設定しようとしています。ボタンは を使用して配列から作成され、配列ng-repeatは時間の経過とともに大きくなります。これをコード化する方法についての私の考えは、AngularJS ドキュメントのこのページの最後の例に基づいていますng-click。私はAngularJSを初めて使用し、まだjQueryの考え方から離れようとしているので、これが最善の方法ではないかどうか教えてください.

jsfiddle: http://jsfiddle.net/E2GB9/ - ブートストラップを 100% レンダリングしない理由はわかりませんが、問題にはなりません..

開発者ツールを使用してng-clickポスト ロードをチェックすると、正しいように見えますng-click="appliedStyle='example1'"が、ボタンをクリックしても appliedStyle が設定されません。

html:

<body ng-app>
<div ng-controller="TypeCtrl">
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#source" data-toggle="tab">Test Area</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="source">
        <div class="hero-unit" ng-class="appliedStyle">
        <h1>H1 Header</h1>
        <h2>H2 Header</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        </div>
    </div>
  </div>
</div>  

    <ul class="unstyled">
        <li ng-repeat="style in styles">
            <span>Name: {{style.name}}</span><br>
            <span>H1: {{style.h1}}</span><br>
            <span>H2: {{style.h2}}</span><br>
            <span>P: {{style.p}}</span><br>
            <button class="btn-small" type="submit" ng-click="appliedStyle='{{style.className}}'">Apply {{style.name}}</button>
        </li>
    </ul>
        The Applied Style is : {{appliedStyle}}
</div>

js:

function TypeCtrl($scope) {

$scope.styles = [
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}];
}

CSS:

.example1 h1{
font-size:  10px;
color: red;
}

.example1 h2{
font-size:  8px;
}

.example1 p{
font-size:  6px;
}
4

2 に答える 2

2

次のようなメソッドを追加して、コントローラーを変更します。

function TypeCtrl($scope) {

    $scope.styles = [
        {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}];
    } 

    $scope.applyStyle = function(style) {
        $scope.appliedStyle=style.className;
    }
}

次に、コードでこれを行うだけです。

<button class="btn-small" type="submit" ng-click="applyStyle( style )">

長い答えは、ng-click が {{ }} 構文を処理しない $parse サービスを使用しているため、{{ }} が埋め込まれた JavaScript は有効な式ではないということです。コードをJavascriptに入れ、テンプレートから外したいので、関数を使用します。コードを分けて保管してください。

于 2013-10-15T19:16:10.867 に答える