CODEWITHSUNDEEP
javascriptjqueryhtmlarraysangularjs
Coolguy
Coolguy

Reputation: 2285

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

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?

Upvotes: 0

Views: 545

Answers (3)

Vivien Hung
Vivien Hung

Reputation: 235

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

Upvotes: 0

Stepan Kasyanenko
Stepan Kasyanenko

Reputation: 3186

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>

Upvotes: 1

Pavan Teja
Pavan Teja

Reputation: 3202

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);
                    }
                });
            });
        }

Upvotes: 1

Related Questions