web-dev-qa-db-ja.com

ng-clickを使用して、ng-repeatアイテムのアクティブ状態ng-classをどのように切り替えるのですか？

<ul>
  <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false">
      <img data-ng-class="{'active' : toggle}" src="" />
  </li>
</ul>

「アクティブ」クラスのCSSは、ブートストラップからのものです。

切り替えがうまくいくので、ほとんど私が望んでいます。ナビゲーションリンクのアクティブな状態に似ていますが、私の例では画像を扱うため、URL文字列などを考慮する必要があります。

私はここで見つかったこの例をエミュレートしないようにしました（画像に対して同じロジックを試しました）： ng-class ng-repeat。AngularJSに基づいてアクティブなメニュー項目を強調表示します

誰かが私を正しい方向に向けることができれば、私はそれを大いに感謝します。 ：D

angularjsangularjs-ng-repeatangularjs-ng-clickng-class
8
matenji

私があなたの状況で行うことは、そのng-repeatの親スコープ内にオブジェクトを定義し、インデックスまたはそのオブジェクトのプロパティに必要なものを割り当てることです。これは、オブジェクトがJavaScriptで参照によって機能するためです。つまり、ng-clickは親スコープ属性を再定義するのではなく、実際に更新します。 plnkrでの例： http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI?p=preview

<!DOCTYPE html>
<html ng-app>

  <head>
    <style>
        .active{
            background-color: red;
            height: 500px;
            width: 500px;
        }
    </style>
  </head>

  <body ng-controller="HolaCtrl">
    <ul>
      <li data-ng-repeat="image in images" data-ng-click="toggleObject.item = $index">a
         <img data-ng-class="{'active' : toggleObject.item == $index}" src="" /><br>
      </li>
    </ul>
    <script>
        function HolaCtrl($scope){
            $scope.images = [1,2,3];
            $scope.toggleObject = {item: -1};
        }
    </script>
  </body>

</html>

乾杯

13
HeberLZ

あなたは次の方法でそれを試すことができます：

<body>
<style>
.blue{
    background:blue;
}
</style>
<div ng-app='my'>
  <div ng-controller='maincontroller as mainctrl'> 
    <div ng-repeat='item in mainctrl.arr'>
    <p ng-class='{"blue":mainctrl.bgcolor==item}'
    ng-click='mainctrl.addColor(item)'>
    item {{item}}
    </p>

    </div>
  </div>
</div>
<script>
var app = angular.module('my',[])
app.controller('maincontroller',maincontroller)
function maincontroller(){
var mainctrl = this;
mainctrl.arr = [1,2,3,4,5,6];

mainctrl.addColor = function(data){
mainctrl.bgcolor = data
}
}
</script>
</body>
0
ashish yadav