AngularJSの特定のng-repeatにクラスを追加するだけです

私は自分のアプリにシステムのようなFacebookスタイルを持っていて、ユーザーがクリックするとlikeボタンの色を変えたいと思っています。これは.activeクラスを追加することで行いますが、ng-repeatの1つの項目だけをアクティブなクラスにする方法はわかりません。AngularJSの特定のng-repeatにクラスを追加するだけです

HERESに私の見解：

<div class="list card" ng-repeat="data in array"> 
    <div> 
    <a ng-click="favourite(data.ID)" class="tab-item" > 
     <i ng-class="{'active': favourited}" class="icon ion-thumbsup" ></i> 
     Favourite 
    </a> 
    </div> 
</div>

NG-クリックすると、データベースに格納するサーバーにリクエストを送信し、NG-クラスがアクティブにクラスを変更したときに、コントローラから「お気に入り」変数trueに変更、この要求はsucesfullしたら：

$scope.favourite = function(dataID){ 
    $favourite.favourite(dataID).then(function(data){ 
     $scope.favourited = true; 
    }); 
    }

これが好きなすべてのボタンがアクティブになりますので、私はちょうどちょうど現在のボタンをアクティブにする方法を知ってはいけません。事前

出典

2016-04-02 JamesG

これは、すべてのngリピートに対してこの変数のコピーが1つしかないため、$ scope.favouritedを使用しているためです。したがって、すべてのngリピートが更新されます。そのため、一度に1つのレコードだけをお気に入りとしてマークする必要があるため、要件ごとに個々のレコードに変数を使用してみてください。

はちょうどあなたのdata要素のそれぞれにfavoriteプロパティを設定しdata.favourited = true;

出典

2016-04-02 07:16:42 Harpreet

で

ありがとうございます、配列の特定要素が好きなものであると言うことでグローバルなブール値を使用することはできません。

ブール値をスコープに格納する代わりに、という要素をという名前で保存し、active: data == theFavoriteElementを使用します。

複数の要素が好きな場合は、要素にブール値を格納し、active: data.favoriteを使用します。

出典

2016-04-02 07:15:50

でng-class="{'active': data.favourited}"

と

$scope.favourited = true;と

ng-class="{'active': favourited}"を交換してください。リクエストが正常に完了したら、データのfavoriteプロパティを変更し、$scopeのプロパティは変更しないでください。

<div class="list card" ng-repeat="data in array"> <div> <a ng-click="favourite(data.ID)" class="tab-item" > <i ng-class="{'active': data.favorited}" class="icon ion-thumbsup" ></i> Favourite </a> </div> </div>

そして、あなたのコントローラで
は：

$scope.favourite = function(dataID){ $favourite.favourite(dataID).then(function(data){ data.favourited = true; }); }

出典

2016-04-02 07:17:11 iulian

-1

これは、仕事をする必要がありますが、あなたが好きなデータを保存したい場合は、バックエンドからのデータとモデルをバインドする必要があります。フラグがdataに保存されている場合たとえば、あなたは

<!DOCTYPE html> 
<html ng-app="test"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body ng-controller="testCtrl"> 
<div class="list card" ng-repeat="data in a"> 
    <div> 
    <a ng-click="active = !active" class="tab-item" ng-model="active" > 
     <i ng-class="{'active': active}" class="icon ion-thumbsup" ></i> 
     Favourite 
    </a> 
    </div> 
</div> 
</body> 
</html>

============

<div> 
    <a ng-click="favorite(data)" class="tab-item"> 
    <i ng-class="{'active': data.active}" class="icon ion-thumbsup" ></i> 
     Favourite 
    </a> 
</div> 

$scope.favorite = function(data) { 
    //use $http or $resource to update the data in backend 
    //for example if you used $resource service 
    data.favorite = !data.favorite; 
    data.$save(); 
};

に

<div> 
    <a ng-click="active = !active" class="tab-item" ng-model="active" > 
    <i ng-class="{'active': active}" class="icon ion-thumbsup" ></i> 
     Favourite 
    </a> 
</div>

を変更する必要があります

出典

2016-04-02 07:33:07

AngularJSの特定のng-repeatにクラスを追加するだけです

答えて

関連する問題