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。但如果我使用id，则没有元素ng-repeat。你们知道怎么做吗？

Answer 1

你可以在评论中使用@Tushar提到的eq()方法。给class一些ng-repeat。然后你可以将所需的索引传递给blink index.check下面的代码片段。

        <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 的操作，最好使用directive。

jsfiddle上的实例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 Example

使用ng-repeat后如何选择特定元素？

3 个答案: