如何將複選框與控制器中的不同功能綁定？

請幫助我。我如何將功能與複選框相關聯？我希望當複選框被選中時，它會調用一個函數並取消選中調用另一個函數。這兩個函數都從服務器獲取數據並更新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'); 
});

來源

2016-11-24 X.Xin

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

來源

2016-11-24 21:15:07

非常感謝你。我試過你的代碼，問題是這個表的內容似乎在函數執行後沒有刷新。 –

@ X.xin您的迴應是否從後端正確回來？您應該調試您的代碼以確保$ scope.ue得到正確更新 –

如何將複選框與控制器中的不同功能綁定？

回答

相關問題