how do I execute a function in angular.js, from an input checkbox?

Question

I have a list of things with switches. How can I get each switch to call a function with that object and the switch as parameters?

I have tried to set the "ng-change" directive for my checkboxes, but the function doesn't seem to get called. How do I call the toggleSync function I made?

I am a total newb, so I'm sorry if I need serious help.

<div id="track-list" ng-controller="Controller" ng-init="update()">
  <div class="data-table">
  <table class="table table-hover tablesorter">
    <tr ng-repeat="item in items">
      <td><a href='{[{item.path}]}/{[{item.id}]}'>{[{item.title}]}</a></td>
      <td>{[{item.time_created}]}</td>
      <td>
        <div class=checkbox>
          <input ng-model="value" id="check{[{$index}]}" type="checkbox" ng-checked="!item.deleted" ng-change="toggleSync(item.id, this)" ng-true-value="YES" ng-false-value="NO"/>
          <label for="check{[{$index}]}">{{value}}</label>
        </div>
      </td>
    </tr>
  </table>


function Controller($scope) {
  console.log("init");
  $scope.items = [];

  $scope.toggleSync = function(objectId, input) {
    console.log("toggle sync");
  }
}

Your example code works just fine, provide a jsfiddle and more details which version of angular do you use, browser, operating system and etc. — jusio
– jusio, Commented Apr 14, 2013 at 2:41

jpmorin · Accepted Answer · 2013-04-14 05:44:56Z

4

Here is a plunker with your code and some corrections (ie: you used the tags delimiters {[{item.title}]} instead of {{item.title}})

Link: http://plnkr.co/edit/f9ngMMe8XJT4QDlA0Nx0?p=preview.

In this demo, there is a table with rows to display the item.path/item.id as a link, followed by the item.title and a checkbox which value is set to YES/NO according to its state. When the checkbox state has changed, the toggleSync function is called with the item as a parameter. The input checkbox has as model item.value, which is a property available inside of the toggleSync function.

answered Apr 14, 2013 at 5:44

jpmorin

6,0182 gold badges31 silver badges39 bronze badges

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

3 Comments

Andrew Johnson Over a year ago

Thanks, my app.js file was structured incorrectly. Your code showed me i needed to have app.controller('Controller', function($scope) {, instead of function Controller($scope) {

Andrew Johnson Over a year ago

Also, we are using tag delimiters because Django recognizes {{}} in templates.

jpmorin Over a year ago

Glad you could find a solution to your problem!

Collectives™ on Stack Overflow

how do I execute a function in angular.js, from an input checkbox?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related