0

Angular が初めてで、少し混乱しています。コントローラーからの初期値に応じて、目盛りまたは十字を表示する必要があるリスト項目があります。

ユーザーがリスト項目をクリックすると、値を現在の反対に変更し、CSS クラスを更新してこれを DOM に反映させたいと考えています。

現在、次のコントローラーがあります。

app.controller('SetupSettingsCtrl', ['$scope', '$rootScope', '$location', function ($scope, $rootScope, $location) {
    console.log('setup controller loaded');

    $scope.data ={
        about: {
            uie: '439213949123I034',
            appVersion: '3.23453'
        },
        lab: {
            sleep: false,
            move: true
        },
        stats: {
            optOut: true
        }
    };

    $scope.chkItem = function($event, prop){
        console.log(prop);
    };

}]);

そして、次のテンプレート部分:

<div class="pure-u-1">
    <h1 class="h2 text-center">About</h1>
    <p class="text-center">Phone UIE: <span class="text-valid">{{uie}}</span></p>
    <p class="text-center">App version: <span class="text-valid">{{appV}}</span></p>
    <p class="text-center"><a href="#" class="pure-button pure-button-primary"><i class="icon-refresh"></i> Manual Update</a></p>
</div>
<div class="pure-u-1">
    <h2 class="text-center">LAB functions</h2>
    <section class="view-content">
        <ul class="center-block list-bare list-icon-box-chk">
            <li class="pointer" ng-class="{'un-chk': !sleep}" ng-model="sleep" ng-click="chkItem($event)">Sleep with phone on bed</li>
            <li class="pointer" ng-class="{'un-chk': !move}" ng-model="move" ng-click="chkItem($event)">Movement checker</li>
        </ul>
    </section>
</div>
<div class="pure-u-1">
    <h2 class="text-center">Anonymous Statistics</h2>
    <section class="view-content">
        <ul class="center-block list-bare list-icon-box-chk">
            <li class="pointer" ng-class="{'un-chk': !optOut}" ng-model="optOut" ng-click="chkItem($event)">I do not want anonymous statistics to be geathered for Health research, and healthcare improvement</li>
        </ul>
    </section>
</div>

モデル参照を渡して $scope 値を更新し、変更をトリガーする方法がわかりませんか? モデル プロパティ参照を渡すと、値が取得されます。

モデル値をサーバーにも渡すには、コントローラー メソッドを呼び出す必要があります。

4

2 に答える 2

1

あなたの「コントローラー」で利用可能になります

$scope.chkItem = function($event, prop){
        console.log(data.lab.sleep);

    };

渡す必要なく直接更新できます

<li class="pointer" ng-class="{'un-chk': !data.lab.sleep}" ng-model="data.lab.sleep" ng-click="chkItem($event)">Sleep with phone on bed</li>
于 2013-08-22T10:02:44.190 に答える
1

両方を行う必要があります。モデルを切り替えるだけでng-clickなく、モデルをパラメーターとして渡す必要なく内部で関数を呼び出すこともできます。liまた、モデルをsにバインドする必要はありません。

<li class="pointer" 
ng-class="{'un-chk': !data.lab.sleep, 'chk': data.lab.sleep}" 
ng-click="data.lab.sleep = !data.lab.sleep; chkItem($event)">
    Sleep with phone on bed
</li>
<li class="pointer" 
ng-class="{'un-chk': !data.lab.move, 'chk': data.lab.move}" 
ng-click="data.lab.move = !data.lab.move; chkItem($event)">
    Movement checker
</li>

(私はあなたの HTML の{{uie}}andがandのようになる必要があると思います){{appV}}{{data.about.uie}}{{data.about.appVersion}}

JS:

$scope.chkItem = function($event){        
    /* do something here */
};
于 2013-08-22T09:57:02.430 に答える