ng-model在ng-model變化後執行

Question

我想知道是否有一種方法，我可以讓ng-click函數接受一個範圍變量，該範圍變量在相同範圍變量的ng模型的值發生變化後執行。我在名爲analyses的列表中有一個analysis對象列表，其中包含include布爾屬性。它們以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排除。

我能想到的解決方案是找到某種方法，在scope變量被綁定到ng-model之後執行ng-click execute，或者在ng-click方法中更改$ scope.analyses對象的某種方式，那麼ng-model語句就不需要了？

謝謝！

編輯：ng-model語句實際上是btn-checkbox指令所必需的。我需要此指令來顯示包含/排除某些分析的開關切換。用於指示包含/排除的css的替代指令或代碼將會很有幫助！

Answer 1

如果強似在analysis.included你的範圍，你的功能得到它

我創建了一個 plunkr證明

基本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 
} 
}; 

Answer 2

我不是挺確定我關注，但我認爲我們可以簡化一些事情。

首先，假設每個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; 
}; 

我讓你做的重構來保持其乾燥。那麼你的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 3

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

如果不是從值中加/減，而是簡單地跟蹤數組的長度，那麼一切都應該落實到位。

這就是我在說的。你的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 4

我不確定我是否遵循，但您的條件邏輯$scope.set正在尋找包含屬性增加前的真實值。這顯然不會發生，因爲您的代碼正在運行的示例in this plunker。

唯一的區別是，我已確保include是前三分析& &設置爲true的屬性。你的代碼按預期工作，你的分析對象不是。