如何在控制器中绑定具有不同功能的复选框？答案

【问题标题】：How to bind checkbox with different functions in the controller?如何在控制器中绑定具有不同功能的复选框？
【发布时间】：2016-11-25 05:15:07
【问题描述】：

请帮我解决这个问题。如何将功能与复选框相关联？我想当复选框被选中时，它会调用一个函数，而未选中的会调用另一个函数。这两个函数都从服务器获取数据并更新 html 中表格的内容。代码如下所示。

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>

控制器：

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

【问题讨论】：

标签： html angularjs checkbox

【解决方案1】：

ngTrueValue 和 ngFalseValue 用于在模型上设置默认值 true 或 false 以外的值，而不是在更改输入时调用函数。

您应该使用ng-change 代替，如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();
  }
}

【讨论】：

非常感谢。我试过你的代码，问题是函数执行后表格内容似乎没有刷新。
@X.xin 您的响应是否从后端正确返回？您应该调试代码以确保 $scope.ue 正确更新