How to bind checkbox with different functions in the controller?

Question

please help me with this. How can I associate functions with checkbox? I want when the checkbox is checked, it calls a function and unchecked calls another function. both functions obtain data from the server and update the content of the table in the html. the code are as shown below.

html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <meta charset ="utf-8">
    <meta http-equiv="X-UA-Compatible" content= "IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="dragtable.js"></script>
    <script src="sorttable.js"></script>

</head>
<body>
    <div ng-table="tableParams" class="container" ng-Controller="AppCtrl" style="margin-left:180px">
    <h1>ERIS/BUDS Mismatches</h1>
        <label style="margin-left:1000px"><input type="checkbox" ng-model="tryout" ng-true-value ="all()" ng-false-value ="mis()">Show All</label>

        <table class = "table draggable sortable">
            <thead>
                <tr>
                    <th><a>EnodeB</a></th>
                    <th><a>Product(BUDS)</a></th>
                    <th><a>SerialNum(BUDS)</a></th>
                    <th><a>Bams-ID(BUDS)</a></th>
                    <th><a>Product(ERIS)</a></th>
                    <th><a>SerialNum(ERIS)</a></th>
                    <th><a>Bams-ID(ERIS)</a></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat = "device in ue">
                    <td>{{device.enodeBname}}</td>
                    <td>{{device.productnum_buds}}</td>
                    <td>{{device.serialnum_buds}}</td>
                    <td>{{device.bamsid_buds}}</td>
                    <td>{{device.productnum_eris}}</td>
                    <td>{{device.serialnum_eris}}</td>
                    <td>{{device.bamsid_eris}}</td>

                </tr>
            </tbody>

        </table>
    </div>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="Controller/controller.js"></script>

</body>

controller:

var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){

    $http.get('/enodebMismatch').success(function(response){
                    $scope.ue = response;
                }); 

    $scope.all = function(){

        $http.get('/enodeb').success(function(response){
                $scope.ue = response;
            });
    }

    $scope.mis = function(){

           $http.get('/enodebMismatch').success(function(response){
                    $scope.ue = response;
                }); 
    }
}]);

server.js:

 var express = require('express');
 var app = express();
 var mongojs = require('mongojs');
 var db = mongojs('127.0.0.1/ErisBuds',['mismatches']);


 app.use(express.static(__dirname));

 app.get('/enodebMismatch',function (req,res){
     console.log('received get request');
     db.mismatches.find({$where:"obj.bamsid_eris != obj.bamsid_buds" } ).sort({enodeBname: 1}, function(err,docs){ 
         console.log(docs);
         res.json(docs);
     })
 });

 app.get('/enodeb',function (req,res){
     console.log('received get request');
     db.mismatches.find().sort({enodeBname: 1}, function(err,docs){
         console.log(docs);
         res.json(docs);
   })
 });

  app.listen(3000, function(){
     console.log('i am listening');
 });

Robin-Hoodie · Accepted Answer · 2016-11-24 21:15:07Z

1

ngTrueValue and ngFalseValue are used to set values other than the default true or false on your model, not for calling a function on changing the input.

You should use ng-change for that instead, as mentioned in the docs on input[checkbox]

<input type="checkbox" ng-model="tryout" ng-change="tryoutChanged()">Show All</label>

AppCtrl:

$scope.tryoutChanged = function() {
  if ($scope.tryout) {
    $scope.all();
  } else {
    $scope.mis();
  }
}

answered Nov 24, 2016 at 21:15

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

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

2 Comments

X.Xin Over a year ago

thank you very much. i tried your code, the problem is the table content seems not refreshing after the function has been executed.

Robin-Hoodie Over a year ago

@X.xin Is your response coming back correctly from the backend? You should debug your code to make sure that $scope.ue is getting updated correctly

Collectives™ on Stack Overflow

How to bind checkbox with different functions in the controller?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related