ng-repeat select the initial value in the list

2019-07-11 18:50发布

站内问答 / 移动开发
1745 1 4

Please help with ng-repeat. I created a list of values ​​using ng-repeat. How can I specify the value of the middle of the list that I want to show first (I want to show 'Earth' first in the list)? My code:

html 

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

controller:

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

});

Thanks for help!

1条回答
家丑人穷心不美
2楼-- · 2019-07-11 19:25

Its just workaround, but it will work..

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)