AngularJS指令ng-repeat第一次顯示的元素

我想在第一次出現html元素時在ng-repeat中應用自定義指令。第一次出現後的所有其他元素都不會有指令，或者指令不會被啓用。AngularJS指令ng-repeat第一次顯示的元素

該元素可能不會出現在ng-repeat的第一次迭代中，因此我不能首先使用$。

我正在創建一個教程工具提示，並希望它僅顯示在第一個可見元素上。 ng-repeat的基礎範圍對教程沒有任何知識，所以我不能使用它。

2016-04-22 Dave Barker

我想你可以寫一個指令，這樣的 -

var app = angular.module('app', []) 
 

 
app.controller('HomeCtrl', ['$scope', 
 
    function($scope) { 
 
    $scope.done = false; 
 
    $scope.items = [{ 
 
     name: 'One' 
 
    }, { 
 
     name: 'Two' 
 
    }, { 
 
     name: 'Three', 
 
     special: true 
 
    }, { 
 
     name: 'Four', 
 
     special: true 
 
    }, { 
 
     name: 'Five', 
 
     special: true 
 
    }]; 
 
    } 
 
]); 
 

 
app.directive('special', function() { 
 
    return { 
 
    scope: false, 
 
    restrict: 'A', 
 
    link: function(scope, element, attrs) { 
 
     if (scope.item.special && !scope.$parent.$parent.done) { 
 
     scope.done = true; 
 
     scope.$parent.$parent.done = true; 
 
     } 
 
    }, 
 
    template: "<p ng-class='{active: item.special && this.done}'>{{ item.name }}</p>" 
 
    }; 
 
});

.active { 
 
    color: red; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <title>Demo</title> 
 
</head> 
 

 
<body ng-controller="HomeCtrl"> 
 

 
    <li ng-repeat="item in items track by $index" special="" item="item" done="done">{{ item.name }}</li> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</body> 
 

 
</html>

UPDATE

所以，唷！我得到它的工作，但如果你看看指令，你會看到我正在使用$ parent屬性玩弄父範圍..我現在沒有更好的解決方案。 :(

希望這有助於！

來源

2016-04-22 02:35:36 atefth

我得問題是四，五月也有特殊=真實，我只想指令辦理三。 –

@DaveBarker解決了這個問題，但我不當然，如果這是最好的解決方案。 – atefth

AngularJS指令ng-repeat第一次顯示的元素

回答

相關問題