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

您应该同时做：切换模型以及调用内部函数，ng-click而无需将模型作为参数传递。此外，您不需要将模型绑定到lis：

<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}}和{{appV}}需要像{{data.about.uie}}and {{data.about.appVersion}}）

JS：

$scope.chkItem = function($event){        
    /* do something here */
};
于 2013-08-22T09:57:02.430 回答
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 回答