How to select a specific element after using ng-repeat?

Question

I'm using ng-repeat to repeatedly show an element out in html based on the array of info I have.

My Controller 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'
  }
}]);

My html:

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

I'm trying to make one of the data in the qnum array blink by using the function below:

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

That means I need an id on the element of the array to specify which qnum to blink. But there is no element id if I use ng-repeat . Do you guys know how to do it?

Answer 1

you can use eq() method as mentioned by @Tushar in comments. give some class to ng-repeat .then you can pass desired index to blink index.check the below snippet for an idea.

        <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

For the manipulation of the DOM it is best to use a directive .

Live example on 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

I would use css and ng-class for the blinking.

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 Example