3

私の問題は、角度ディレクティブの作成にあります。

1つのng-modelだけでチェックボックスのグループを作成したいと思います。これはビットフィールドやフラグのようなものです。つまり、チェックボックスの値は0、1、2、3からnまでですが、ng-modelの場合は、チェックされているすべてのチェックボックスの2^値を追加するだけです。追加する値は、1、2、4、8、16、..です。

私の問題に対して、より良い、より正確な、またはより単純な解決策があるのだろうか。

http://plnkr.co/edit/9h7EkEpDohXTniIDHdc5

この例では、テキストボックスの値を変更でき、チェックが更新されますが、その逆はできません。それは少しクレイジーです、コードは私の開発マシンで動作していますが、Plnkrでは動作していません！

app.directive('ngCheckboxFlags', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrls) {
        var flagSum;
        var checkboxes = [];

        // trigger changes of the ngModel
        scope.$watch(attrs.ngModel, function (value) {
            flagSum = value;
            for (var i = 0, ii = checkboxes.length; i < ii; ++i) {
                var checkbox = checkboxes[i];
                checkbox.checked = flagSum & (1<<checkbox.value);
            }
        });

        for (var i = 0, inputs = element.find('input[type=checkbox]'), ii = inputs.length; i < ii; ++i) 
        {
            var checkbox = inputs[i];
            checkboxes.push(checkbox);
            // trigger changes of HTML elements
            $(checkbox).bind('change', function () {
                flagSum = ctrls.$viewValue ^ (1<<this.value);
                console.log(flagSum);

                //ERROR: Change not happening, textbox shows old value
                scope.$apply(function () {
                    ctrls.$setViewValue(flagSum);
                });
            });
        }
    }
};
});

事前にt​​hnxknut

4

2 に答える 2

5
于 2013-02-28T11:43:19.460 に答える
1

よりエレガントで短い方法を見つけました：http：//plnkr.co/edit/9h7EkEpDohXTniIDHdc5

私の問題は

  • link（）が各要素に対して呼び出されることに気づいていませんでした
  • したがって、新しい「スコープ」が作成されるたびに（要素ごとに）
  • モデルが変更されたときに更新するために、変数（現在はチェックボックスと呼ばれています。最初のバージョンでは配列でした）に実際の要素への参照を保存する必要があります（scope。$ watch）

  • 「グローバル」flagSumは必要ありません。値をscopeに転送するためのチェックボックスバインディングにあるlokalフラグSumだけです。$apply

    app.directive('ngCheckboxFlags', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrls) {
        var checkbox = element.find('input[type=checkbox]')[0];
        if (typeof checkbox === "undefined")
          return;

        // trigger changes of the ngModel
        scope.$watch(attrs.ngModel, function (value) {
            checkbox.checked = value & (1<<checkbox.value);
        });

        $(checkbox).bind('change',  function () {
            var flagSum = ctrls.$viewValue ^ (1<<this.value);

            scope.$apply(function () {
                ctrls.$setViewValue(flagSum);
            });
        });
    }
  };
});
于 2013-03-15T13:17:38.543 に答える