5

チェックボックス入力のあるオブジェクトのテーブルがあります。オブジェクトのチェックボックスがチェックされている場合、object.isChecked値は に設定されtrue、チェックされていない場合、値は に設定されfalseます。ただし、テーブル内のすべてのチェックボックスをチェック/チェック解除するマスターチェックボックスがあります。ただし、これは値を更新しませんobject.isChecked。マスターチェックボックスで値を変更するにはどうすればobject.isCheckedよいですか?

4

1 に答える 1

8

問題は、Angular 内にないチェックボックスをトリガーすることです。Angular マジックを機能させたい場合は、すべてのモデル操作を Angular スコープ内で行う必要があります。デモ用にプランカーを作成しました。:

index.html

<!DOCTYPE html>
<html data-ng-app="demo">
  <head>
    <script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="angular.js@*" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body data-ng-controller="DemoController">
    <div data-ng-repeat="object in objects">
      {{object.name}}: <input type="checkbox" data-ng-model="object.isChecked">
    </div>
    Master: <input type="checkbox" data-ng-click="triggerAll()">
    {{objects}}
  </body>
</html>

script.js

"use strict";

var demo = angular.module("demo", []);

function DemoController($scope) {
  $scope.objects = [
    {
      name : "First",
      isChecked : true
    },
    {
      name : "Second",
      isChecked : false
    }
  ]

  $scope.triggerAll = function(){
    angular.forEach($scope.objects, function(value){
      value.isChecked = !value.isChecked;
    })
  }
}

すべてのチェックボックスのトリガーはngClick、通常のonClickハンドラーや jQuery ハンドラーではなく、 で行われることに注意してください。これにより、Angular はダーティ チェックを実行し、正しく動作することができます。

于 2013-08-13T22:56:37.397 に答える