2016-11-05 6 views
2

ng-repeatをお手伝いください。 ng-repeatを使って値のリストを作成しました。 最初に表示したいリストの途中の値を指定するにはどうすればよいですか(リストで「Earth」を最初に表示します)?私のコード: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(); 

}]); 

VARS:助けを

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

}); 

ありがとう!

+0

あなたのポスターのVAR –

+0

ために、第一インデックスに地球を保つためには –

答えて

1

そのわずかな回避策を、それが動作します。..

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>

+0

感謝を変更することはできません、それは働きます! –

関連する問題