使用ng-repeat后如何選擇特定元素？

Question

我正在使用ng-repeat根據我擁有的信息數組重復顯示html的元素。

我的控制器js：

app.controller('MainController', ['$scope', function($scope) { 
 $scope.qnums = [
  {
      data : 'A',
      number : '3456'
  },
  {
      data : 'B',
      number : '1234'
  },
  {
      data : 'C',
      number : '7890'
  },
  {
      data : 'D',
      number : '1122'
  },
  {
      data : 'E',
      number : '6677'
  },
  {
      data : 'F',
      number : '5656'
  }
}]);

我的html：

<div ng-repeat="qnum in qnums">
    <div class="upperreg1">{{qnum.data}}</div>
    <div class="upperreg2">{{qnum.number}}</div>
</div>

我正在嘗試使用以下功能使qnum數組中的數據之一閃爍：

function blink(selector, counter){
    $(selector).fadeOut(500, function(){
        $(this).fadeIn(500, function(){
            if ( counter++ < 10 ) {
                blink(this, counter);
            }
        });
    });
}

這意味着我需要在數組元素上指定一個id來指定要閃爍的qnum 。 但是，如果我使用ng-repeat ，則沒有元素id 。 你們知道怎么做嗎？

Answer 1

您可以使用@Tushar在評論中提到的eq()方法。 給ng-repeat一些class ，然后您可以傳遞所需的索引以使索引閃爍。檢查下面的代碼片段以獲取想法。

        <div ng-repeat="qnum in qnums" class="item">
                <div class="upperreg1">{{qnum.data}}</div>
                <div class="upperreg2">{{qnum.number}}</div>
            </div>

        function blink(index, counter){
            $('.item').eq(index).fadeOut(500, function(){
                $(this).fadeIn(500, function(){
                    if ( counter++ < 10 ) {
                        blink(this, counter);
                    }
                });
            });
        }

Answer 2

對於DOM的操作，最好使用指令 。

jsfiddle上的實時示例。

 angular.module('ExampleApp', []) .controller('ExampleController', function($scope) { $scope.numberBlink = 1; $scope.qnums = [{ data: 'A', number: '3456' }, { data: 'B', number: '1234' }, { data: 'C', number: '7890' }, { data: 'D', number: '1122' }, { data: 'E', number: '6677' }, { data: 'F', number: '5656' }]; }) .directive('blink', function() { return { restrict: "A", scope: { counter: "=blink", blinkEnable:"=" }, link: function(scope, elem) { var counter = 0; function blink() { $(elem).fadeOut(500, function() { $(this).fadeIn(500, function() { if (counter++ < scope.counter) { blink(); } }); }); } function startBlink(){ counter=0; blink(); } function stopBlink(){ counter=scope.counter; } scope.$watch('blinkEnable',function(val){ if(val) startBlink(); else stopBlink(); }); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController"> <div ng-repeat="qnum in qnums"> <div blink="10" blink-enable="$first">{{qnum.data}}</div> <div blink="10" blink-enable="$first">{{qnum.number}}</div> </div> <b>Dynamic change blink by $index</b> <input ng-model="numberBlink"> <div ng-repeat="qnum in qnums" blink="10" blink-enable="numberBlink-1==$index"> <div>{{qnum.data}}</div> <div>{{qnum.number}}</div> </div> <b>Dynamic change blink by selected option</b> <select ng-model="elementBlink" ng-options="item as item.data for item in qnums"></select> <div ng-repeat="qnum in qnums" blink="10" blink-enable="elementBlink==qnum"> <div>{{qnum.data}}</div> <div>{{qnum.number}}</div> </div> <b>Dynamic change blink by checked</b> <div ng-repeat="qnum in qnums" > <div blink="10" blink-enable="qnum.checked">{{qnum.data}}</div> <div blink="10" blink-enable="qnum.checked">{{qnum.number}}</div> <label><input type="checkbox" ng-model="qnum.checked"> Blink!</label> </div> </div> </div> 

Answer 3

我會使用css和ng-class進行閃爍。

HTML：

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <div ng-repeat="qnum in qnums" ng-class="{blink:qnum.data===blinkTargetData}">
      <div>{{qnum.data}}</div>
      <div>{{qnum.number}}</div>
    </div>
  </div>
</div>

CSS：

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}

JavaScript：

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.qnums = [{
      data: 'A',
      number: '3456'
    }, {
      data: 'B',
      number: '1234'
    }, {
      data: 'C',
      number: '7890'
    }, {
      data: 'D',
      number: '1122'
    }, {
      data: 'E',
      number: '6677'
    }, {
      data: 'F',
      number: '5656'
    }];

    $scope.blinkTargetData='B';
  });

JSFiddle示例