AngularJS update model on click of element and also toggle CSS class

Question

New to Angular and a bit confused. I have a list item that needs to display a tick or a cross depending on an initial value from its controller.

When a user clicks the list item I want to change the value to its current opposite and then update the CSS class to reflect this in the DOM.

Currently I have the following controller:

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);
    };

}]);

And the following template partial:

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

I do not now how to pass the model reference to update the $scope value to trigger the change? When I pass the model property reference I get the value.

I need to call the controller method to pass the model value to the server also.

AlwaysALearner · Accepted Answer · 2013-08-23 09:41:00Z

1

You should do both: toggle the model as well as call the function inside ng-click without the need of passing the model as a parameter. Also you dont need to bind the model to the 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>

(I guess those {{uie}} and {{appV}} in your HTML need to be like {{data.about.uie}} and {{data.about.appVersion}})

JS:

$scope.chkItem = function($event){        
    /* do something here */
};

edited Aug 23, 2013 at 9:41

answered Aug 22, 2013 at 9:57

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RyanP13 Over a year ago

I need to call a controller method to post the model property and value to the server. Sorry for not mentioning it. This also does not seem to work when the value is already preset to true.

RyanP13 Over a year ago

How about for multiple list elements? I would need to know which one was clicked to update the associated model.

AlwaysALearner Over a year ago

@RyanP13 In that case you can pass the index of the item to the function: ng-click="chkItem($index)".

RyanP13 Over a year ago

I am not using ng-repeat though. It is a a hard coded template not data driven.

AlwaysALearner Over a year ago

@RyanP13 Can you share more of your HTML? How exactly are you using data model inside the HTML?

JQuery Guru · Accepted Answer · 2013-08-22 10:02:44Z

1

In your "Controller" it will be avaliable

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

    };

You can update directly no need to pass

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

answered Aug 22, 2013 at 10:02

JQuery Guru

6,9631 gold badge35 silver badges40 bronze badges

Collectives™ on Stack Overflow

AngularJS update model on click of element and also toggle CSS class

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related