ng-repeat選擇列表中的初始值

請幫助ng-repeat。我使用ng-repeat創建了一個值列表。如何指定我想先顯示的列表中間的值（我想首先在列表中顯示「地球」）？我的代碼：ng-repeat選擇列表中的初始值

HTML

<li class="list__item" ng-repeat="poster in posters">{{poster.title}}</li>

控制器：

'use strict'; 
angular.module('oldmenTest') 
    .controller('FormController', ['$scope', 'postersName', function($scope, postersName) { 
    $scope.posters= postersName.getPosters(); 

}]);

瓦爾：

'use strict'; 

angular.module('oldmenTest') 
.service('postersName', function() { 

var posters = [{ 
    title: 'Mars', 
    description: 'NASA\'s Mars Exploration Program seeks to understand whether Mars was, is, or can be a habitable world. Mission like Mars Pathfinder, Mars Exploration Rovers, Mars Science Laboratory and Mars Reconnaissance Orbiter, among many others, have provided important information in understanding of the habitability of Mars. This poster imagines a future day when we have achieved our vision of human exploration of Mars and takes a nostalgic look back at the great imagined milestones of Mars exploration that will someday be celebrated as 「historic sites.」', 
    image: '/images/mars.jpg' 
}, { 
    title: 'Earth', 
    description: 'There\'s no place like home. Warm, wet and with an atmosphere that\'s just right, Earth is the only place we know of with life – and lots of it. JPL\'s Earth science missions monitor our home planet and how it\'s changing so it can continue to provide a safe haven as we reach deeper into the cosmos.', 
    image: '/images/earth.jpg' 
} 
]; 

this.getPosters = function(){ 
    return posters; 
}; 

});

感謝您的幫助！

來源

2016-11-05 I.Swen

保持地球上的第一個指數在你的海報VAR –

順序不能改變 –

它只是解決方法，但它會運行

angular.module('app', []) 
 
     .controller('Controller', function($scope) { 
 
     
 
$scope.posters = [{ 
 
    title: 'Mars', 
 
    description: 'NASA\'s Mars Exploration Program seeks to understand whether Mars was, is, or can be a habitable world. Mission like Mars Pathfinder, Mars Exploration Rovers, Mars Science Laboratory and Mars Reconnaissance Orbiter, among many others, have provided important information in understanding of the habitability of Mars. This poster imagines a future day when we have achieved our vision of human exploration of Mars and takes a nostalgic look back at the great imagined milestones of Mars exploration that will someday be celebrated as 「historic sites.」', 
 
    image: '/images/mars.jpg' 
 
}, { 
 
    title: 'Earth', 
 
    description: 'There\'s no place like home. Warm, wet and with an atmosphere that\'s just right, Earth is the only place we know of with life – and lots of it. JPL\'s Earth science missions monitor our home planet and how it\'s changing so it can continue to provide a safe haven as we reach deeper into the cosmos.', 
 
    image: '/images/earth.jpg' 
 
}, { 
 
    title: 'Jupiter', 
 
    description: 'There\'s no place like home. Warm, wet and with an atmosphere that\'s just right, Earth is the only place we know of with life – and lots of it. JPL\'s Earth science missions monitor our home planet and how it\'s changing so it can continue to provide a safe haven as we reach deeper into the cosmos.', 
 
    image: '/images/jupiter.jpg' 
 
} 
 
]; 
 
     })

<!DOCTYPE html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <li class="list__item" ng-if="poster.title=='Earth'" ng-repeat="poster in posters">{{poster.title}}</li> 
 
    <li class="list__item" ng-if="poster.title!='Earth'" ng-repeat="poster in posters">{{poster.title}}</li> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-05 12:15:43

非常感謝，它的工作原理！ –

ng-repeat選擇列表中的初始值

回答

相關問題