web-dev-qa-db-ja.com

ng-click関数にパラメーターを渡すにはどうすればよいですか?

コントローラには、次のような関数があります。

AngularJS:

$scope.toggleClass = function(class){
    $scope.class = !$scope.class;
}

切り替えたいクラスの名前を渡すことで、一般的なものにしたい:

<div class="myClass">stuff</div>
<div ng-click="toggleClass(myClass)"></div>

しかし、myClassがangular関数に渡されていません。これをどのように機能させることができますか?上記のコードは、次のように記述した場合に機能します。

$scope.toggleClass = function(){
    $scope.myClass = !$scope.myClass;
}

しかし、これは明らかに一般的ではありません。 myClassという名前のクラスにハードコーディングしたくありません。

13

関数内

$scope.toggleClass = function(class){
    $scope.class = !$scope.class;
}

$scope.classは、パラメータclassとは何の関係もありません。これは、文字通りclassと呼ばれる$scopeのプロパティです。変数classによって$scopeのプロパティidentifiedにアクセスする場合は、配列スタイルのアクセサーを使用する必要があります。

$scope.toggleClass = function(class){
    $scope[class] = !$scope[class];
}

これはAngular固有ではありません。これはJavaScriptの動作方法です。次の例を見てください。

> var obj = { a: 1, b: 2 }
> var a = 'b'
> obj.a
  1
> obj[a] // the same as saying: obj['b']
  2

また、コード

<div ng-click="toggleClass(myClass)"></div>

スコープに変数があると仮定します。 $scope.myClassは、アクセスするプロパティの名前を持つ文字列に評価されます。 文字通り文字列myClassを渡したい場合は、

<div ng-click="toggleClass('myClass')"></div>

この例では、あなたが探しているものが明確にされていません(myClassという名前のクラスがdivにあるため)。

26
Michelle Tilley