在更改ng-model后執行ng-click

Question

我想知道是否有一種方法可以讓ng-click函數在相同的范圍變量的ng-model的值更改后吸收范圍變量。 我在稱為analyses的列表中有一個analysis對象列表，這些analyses具有（其中包括）一個include布爾屬性。 它們以html的形式顯示為按鈕復選框，以按下以包括/排除。

我有這個HTML：

Number of bisulfite sequences: {{included}} used / {{excluded}} excluded
<div ng-repeat="analysis in analyses"><br><label class="btn btn-success" 
ng-model="analysis.include" ng-click="set(analysis.include)" btn-checkbox>

這是控制器中的代碼：

$scope.analyses = some_list_of_analyses
$scope.included = 0
$scope.excluded = $scope.analyses.length

$scope.set = function(include){

//more code to execute involving $scope.analyses

  if(include){
    $scope.included += 1
    $scope.excluded -= 1
  }
  else{
    $scope.excluded += 1
    $scope.included -= 1
  }
}

現在，假設我從初始化中看到的所有排除分析列表開始，當我單擊一個按鈕時，應該將included范圍變量增加1，將excluded的范圍變量減少1。 相反，它將在變量實際更改之前傳遞到analysis.include ，因此我單擊的第一個按鈕顯示-1已使用/ n + 1已排除。

我能想到的解決方案是找到在ng-model之后綁定范圍變量之后執行ng-click的某種方式，或者某種方法來更改ng-click方法中的$ scope.analyses對象，然后ng -model語句不是必需的嗎？

謝謝！

編輯：btn-checkbox指令實際上需要ng-model語句。 我需要此指令來顯示開/關以包括/排除某些分析。 替代性的指令或代碼來實現css來指示包含/排除將很有幫助！

Answer 1

我不太確定我跟隨，但我認為我們可以簡化事情。

首先，假設每個analysis都有一個名為included的屬性。

這使您可以編寫如下幾種方法：

$scope.included = function() {
  var count = 0;
  for(var i = 0; i < $scope.analyses.length; i++) {
    if($scope.analyses[i].included) {
      count++;
    }
  }
  return count;
};

$scope.excluded = function() {
  var count = 0;
  for(var i = 0; i < $scope.analyses.length; i++) {
    if(!$scope.analyses[i].included) {
      count++;
    }
  }
  return count;
};

我將讓您進行重構以使其保持DRY。 然后，您的UI可以執行以下操作：

Number of bisulfite sequences: {{included()}} used / {{excluded()}} excluded
<div ng-repeat="analysis in analyses"><br>
<label class="btn btn-success" ng-model="analysis" ng-click="set(analysis)" btn-checkbox>

您的點擊可能非常簡單（請注意，我們現在正在傳遞分析對象，您可以刪除ng-model屬性）：

$scope.set = function(analysis) {
  $scope.analysis.included = !$scope.analysis.included;
};

Answer 2

我的建議是更改跟蹤包含值/排除值的方式。

如果您只是跟蹤數組的長度，而不是直接從值中減去/減去值，那么所有內容都應該放在適當的位置。

這就是我在說的。 您的HTML可能如下所示：

<div ng-controller="solutionController">
Number of bisulfite sequences: {{included.length}} used / {{analyses.length - included.length}} excluded
<div ng-repeat="analysis in analyses">
    <br />
    <label class="btn btn-success" ng-click="include(analysis)" btn-checkbox=""></label>
</div>

您的控制器可能看起來像這樣：

angular.module("routerApp").controller("solutionController", ["$scope", function($scope){
    $scope.included = [];
    $scope.analyses = ["sodium", "sulfur", "calcium"];

    $scope.include = function(includeMe){
        $scope.included.push(includeMe);
    };

}]);

我的意思是我不完全知道您的分析對象是什么樣子，但這將使您起步並將這些計數綁定到實際的數組長度。

Answer 3

我不確定我是否遵循，但是$scope.set條件邏輯在增加include屬性之前正在尋找真實值。 顯然，這沒有發生，如實際的代碼示例所示。

唯一的區別是，我已確保include是前三個分析的屬性&&設置為true 。 您的代碼按預期工作，但您的分析對象卻沒有。

Answer 4

如果不是從分析中傳遞，而是從函數的作用域中獲得它，該怎么辦？

我創造了一個矮人來展示

基本上是HTML：

 Number of bisulfite sequences: {{included}} used / {{excluded}} excluded

<div ng-repeat="analysis in analyses">
  <br />
  <label class="btn btn-success" ng-model="analysis.include"  btn-checkbox>
    <button ng-click="set($index)">Click Me!</button>
  </label>
</div>

因此，在這里，您傳遞了$ index，以便您知道要在控制器的$ scope上查看哪一個。 因此，在您的控制器中：

$scope.set = function(i){

 var include = $scope.analyses[i].include;
 //more code to execute involving $scope.analyses

 if(include){
  $scope.included += 1
  $scope.excluded -= 1
 }
 else{
  $scope.excluded += 1
  $scope.included -= 1
 }
};

它似乎在插件中起作用。 包含的上升，排除的下降

更新：新的Plunkr ，切換包含/排除而不是僅遞增。

以及更新的設置功能：

$scope.set = function(i){

 $scope.analyses[i].include = !$scope.analyses[i].include;

 include = $scope.analyses[i].include

 //more code to execute involving $scope.analyses

if(include){
  $scope.included += 1
  $scope.excluded -= 1
 } else {
  $scope.excluded += 1
  $scope.included -= 1
 }
};