ng-repeat在列表中选择初始值 [英] ng-repeat select the initial value in the list

查看:83
本文介绍了ng-repeat在列表中选择初始值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请协助进行ng-repeat.我使用ng-repeat创建了一个值列表. 如何指定要首先显示的列表中间值(我想在列表中首先显示地球")?我的代码:

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>

控制器:

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

});

感谢帮助!

推荐答案

它只是解决方法,但可以使用..

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>

这篇关于ng-repeat在列表中选择初始值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆