0

ラジオ要素に基本的なブール値バインディングを設定しました。ユーザーが「真の」ラジオ要素を選択すると、その下に div が表示され、さらにいくつかのオプションが表示されます。ビューが読み込まれると、「true」であるすべての要素に div が表示されるようにしたいと思います。

Angular を導入する前は、jQuery で次の 2 つのことだけを行っていました。

// pseudo-ish code
$(element).on("click", function() { /* show/hide div */ });
$(element:checked).each(function() { /* show child div if val() == 'true' */}

Angular では、それを行うためのディレクティブが必要でした。ディレクティブは私がやりたいことを正確に実行しますが、要素とのデータバインディングを壊したため、モデルがtrue/falseに設定されているかどうか要素はチェックされなくなりました.

  1. 「真の」ラジオがチェックされ、divが表示されるように、データバインディングを再び機能させるにはどうすればよいですか?
  2. このディレクティブ/コードを改善するための提案はありますか? ここではAngular初心者ですが、これまでのところフレームワークが大好きです!

これを示すフィドルは次のとおりです。

http://jsfiddle.net/nloding/SLpBG/

コードは次のとおりです。

HTML:

<div ng-app="myApp" ng-controller="testController">
    <input type="radio" name="TransferControl" data-test-control required data-ng-value="true" data-ng-model="transfer" /> TRUE<br/>
    <input type="radio" name="TransferControl" data-test-control data-ng-value="false" data-ng-model="transfer" /> FALSE

    <div class="testcontrols">SHOW SOME STUFF HERE IF TRUE</div>
</div>

JS:

var myApp = angular.module('myApp', [])
    .directive('testControl', function() {
         return {
            require: 'ngModel',
            restrict: 'A',
            replace: false,
            transclude: true,
            scope: {
               enabled: "=ngModel"
            },
            link: function (scope, element) {
               if (scope.enabled && element.val().toLowerCase() === 'true') {
                  element.nextAll('div.testcontrols').first().show();
               }
                element.bind('click', function() {
                    if ( element.val().toLowerCase() === 'true') {
                        element.nextAll('div.testcontrols').first().show();
                    } else {
                        element.nextAll('div.testcontrols').first().hide();
                    }
                });
               return;
            }
         };
      });

function testController($scope) {
        $scope.transfer = true;
    }
4

2 に答える 2

0

ここでもNoobですが、角度ディレクティブで真または偽の値を使用すると問題が発生する可能性があると思います。ここで重要なのは、true と false をディレクティブ値として使用しているため、Angular によって文字列ではなく JavaScript としてすぐに評価されることです。ここの 2 番目のフィドルに示されている ng-true および ng-false ディレクティブを確認してください: https://github.com/angular/angular.js/issues/2220

幸運を！

于 2013-08-23T20:47:04.557 に答える