私はデモをクリックするとクラスを元に戻しますが、別々に変更する方法はわかりません。 http://jsfiddle.net/pWG2S/1260/各要素ごとにクラスを個別に変更するにはどうすればよいですか？ （角）
私はクラス2、Class3になどとのJSへのコードのような行を追加することもできますが、問題は、このクラスには多くの時間を繰り返すことになるということです。
は、ここでより良い説明のためのデモです。この問題を解決する方法についてのアイデアがあればそれはすばらしいでしょう。
$scope.changeClass = function(){
if ($scope.class === "rotated")
$scope.class = "rotated2";
else
$scope.class = "rotated";
};
だけ配列になり、その後、各インデックスを渡すためにclassを変更：
$scope.changeClass = function(i){
if ($scope.class[i] === "red")
$scope.class[i] = "blue";
else
$scope.class[i] = "red";
};
あなたの答えは正しいですが、今は別の問題があります。 http://prntscr.com/bfpu35。赤い四角をクリックすると、ng-repeat要素ごとに変化します。任意のアイデアを修正する方法は？ – Frutis
私はあなたの答えを正しいものとしてマークします、あなたは基本的に私が望むものでした。私はおそらく私が今持っている別の問題に関する新しいスレッドを作成するでしょう。乾杯してください – Frutis
確かに、新しいものを投稿してください（あなたの矢印の色に使用している別のクラスがありますか？）。 – typologist
事前にありがとうございに関するセクションごとにディレクティブを作る考えてみましょう：
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>
その後、各ディレクティブの内側にスコープを制御することができますし、後で拡張することが簡単になります。
これは一例です。この程度http://jsfiddle.net/pWG2S/1271/
どのように？
コントローラ
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.klasses = ["red", "blue", "yellow"];
$scope.klassIndex = 0;
$scope.changeClass = function(){
var newKlassIndex = ($scope.klassIndex+1)%$scope.klasses.length;
$scope.klassIndex = newKlassIndex;
};
});
ビュー
<body ng-app="ap" ng-controller="con">
<div ng-repeat="klass in klasses">
<div ng-class="klasses[klassIndex]">{{klasses[klassIndex]}}</div>
<button ng-click="changeClass()">Change Class</button>
</div>
</body>
新しいクラスが新しい対応するCSSルールと、$ scope.klassesに追加することができますこの方法です。
ワーキングデモ
http://jsfiddle.net/pWG2S/1267/
あなたは私の質問を誤解しているかもしれません。私の目標は、クリックするたびにボタンを個別に変更することです。 – Frutis
HTML：
<body ng-app="ap" ng-controller="con">
<div ng-class="class">{{class}}</div>
<button id="button1" ng-click="changeClass($event)">Change Class</button>
<div ng-class="class1">{{class1}}</div>
<button id="button2" ng-click="changeClass($event)">Change Class</button>
</body>
JSは：
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.class = "red";
$scope.class1 = "red";
$scope.changeClass = function(event){
console.log(event.currentTarget.id);
if(event.currentTarget.id === "button1")
if ($scope.class === "red")
$scope.class = "blue";
else
$scope.class = "red";
else if(event.currentTarget.id === "button2")
if ($scope.class1 === "red")
$scope.class1 = "blue";
else
$scope.class1 = "red";
};
});
私は、もう少しコードをリファクタリングしている必要があります。しかし、私の最初のアイデアは、あなたがあなたのng-clickとともに$eventに合格する必要があり、独自にevent.currentTarget.id
を介してそれらを識別するためにボタンにidを提供することである。またギーグエンのフィドルは、ディレクティブでそれを行うには、より理にかなっています同じ要素が2回あるからです。それらを指示の中でカプセル化する。この方法では、$イベントを使用してボタンのIDを決定する必要はなく、コントローラは特定のディレクティブのchangeClassだけを処理します。
EDIT1：
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.class = "red"; // default class
$scope.changeClass = function($event){
if ($($event.target).prev().hasClass('red')) {
$($event.target).prev().removeClass('red').addClass('blue');
} else {
$($event.target).prev().removeClass('blue').addClass('red');
}
};
});
HTML：
<body ng-app="ap" ng-controller="con">
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass($event)">Change Class</button>
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass($event)" >Change Class</button>
</body>
ねえ、お返事いただきありがとうございます。私はそれ以上の属性の追加を避けたいと思います。タイプ学者が書いたように、これを行うにはもっと簡単な方法があるはずです。あなたの答えは私が彼の答えにコメントしたのと同じ問題があると思います。 – Frutis
edit1 – Pushpendra
をご覧ください。申し訳ありませんが、動作しません。あなたはtypologistの答えを見て、現在の問題を見てみることができますか？ – Frutis
通常あなたの繰り返しの要素がスコープモデルのデータ構造を繰り返すことに関連することになります。次に、適切なクラスを決定するのに役立つ各項目のプロパティを使用できます。あなたはデモを単純化し過ぎているようです。あなたの実際の世界のユースケースは何ですか？ – charlietfl
私は折り畳み可能なコンテンツを作っていますが、svgイメージをクリックすると-90degressを回転します。問題は、svgをクリックするとクラスの変更がすべてのsvgに適用されます。 – Frutis
Ok ....コントローラのデータモデルに基づいてレンダリングされないコンテンツセクション/ svgですか？これは角度アプリが一般的にどのように働くのかです。 – charlietfl