2016-08-04 9 views
1

私は時間を費やして無駄な問題に遭遇しましたが、実際の解決策を見つけられませんでした。AngularJS - ngモデルの値に基づいてトリガを変更する

マイ状況:

  • 私はNG-変更(ユーザーがチェックボックスをクリックする)と機能を発射チェックボックスの列を持っています。
  • ボックスがチェックされている場合、各チェックボックスはng-modelブール値にバインドされます。行ごとに
  • 、私はその行のチェックボックスをループし、すべての選択値に応じて、trueまたはfalseのいずれかに自分のNG-モデルのブール値を更新機能を起動「を選択すべて」のチェックボックスがあります。
  • DOMでは、select allがうまく動作し、すべてのチェックボックスbool値が変更され、チェックボックスがオンまたはオフになります。
  • ng-model boolがチェックボックスでtrueからfalseに変更されても、ng-change関数は起動されません。

ng-modelsでウォッチャーを実装しようとしましたが、各変更を実行しようとしましたが動作しません。

ng-changeをng-clickに変更し、select all機能で.trigger( 'click')に強制してみましたが、どちらの種類の作品でもハッキーで、チェックボックスのいずれかが正しく動作しません既にクリックされています。真理値であれば、これは反対になります。

ユーザが直接チェックボックスをクリックしていない場合は、コントローラからのチェックボックスにNG-変更機能を発射する方法はありますか?私は関数を介してパラメータを渡しているので、コントローラ内だけでなく、変更から解消する必要があります。

Hereは、私が達成しようとしているJS Binへのリンクです。

トップボックスをクリックすると(すべて選択)、下のボックスがすべて入力されます。下のボックスのいずれかをクリックすると、起動したDOMのテキストを示すng-change関数が起動します。 select allボタンをクリックした場合、テキストが表示されません(変更を実行しない)。

+2

は、私たちにいくつかのコードを表示取り組んで下さい。 – developer033

+0

説明はすばらしく、すべてですが、小さな間違いをしたかどうかはわかりません。説明だけでなく、いくつかのコードを表示してください。 –

+0

js binのリンク – qwert7465

答えて

0

「すべてを選択」チェックボックスをオンにすると、すべての子チェックボックスが点滅します。

私は、あなたは、単にこのように、$ scope.selectAll関数内scope.checked $を呼び出す試すことができると思います。JS Bin

function MyCtrl($scope) { 
$scope.tableRows = [{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0}]; 
$scope.prices = {oral: 100, cleaning: 50, filling: 75, xray: 200, crown: 125, canal: 100, dentures: 60, braces: 130} 
$scope.selectAll = function(procedure, checked) { 
    angular.forEach($scope.tableRows, function(person, index) { 
     $scope.checked($scope.prices[procedure], index, checked, procedure);   
    }); 
}; 
$scope.checked = function(amount, position, checked, procedure) { 
    $scope.tableRows[position][procedure] = checked; 
    if (checked) { 
     $scope.fired = 'FIRED!'; 
     $scope.dollarAmmount = $scope.dollarAmmount + amount; 
     $scope.tableRows[position].subtotal += amount; 
    } else if (!checked) { 
     $scope.fired = ''; 
     $scope.dollarAmmount = $scope.dollarAmmount - amount; 
     $scope.tableRows[position].subtotal -= amount; 
    } 
} 
} 

実行私は、コードのいくつかの行を最適化します。うまくいけば、それはあなたの問題を解決します。

乾杯!

+0

で更新されました。私はちょうど長時間働いていたと思います。コードがブロックされていて、この単純な解決策を考えることができませんでした。ありがとう! – qwert7465

0

は、それはあなたを助けることを願って、怒鳴るようselectall方法を変更してみてください。

$scope.selectAll = function(procedure, checked) { 

    if (checked) { 
    angular.forEach($scope.tableRows, function (person) { 

    person[procedure] = true; 
    }) 
} else if (!checked) { 
    angular.forEach($scope.tableRows, function (person) { 
    person[procedure] = false; 
    }) 
} 
}; 

ここJS BIN

関連する問題