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

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

问题描述

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

html

  • 控制器:

    '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 海报 = [{title: '火星',描述:美国宇航局的火星探索计划旨在了解火星是否曾经、现在或可能是一个宜居的世界.火星探路者、火星探索漫游者、火星科学实验室和火星勘测轨道飞行器等任务为了解火星宜居性提供了重要信息.这张海报想象了我们实现人类探索火星的愿景的未来一天，并怀旧地回顾了火星探索的伟大想象里程碑，这些里程碑有朝一日将被称为历史遗迹".',图像:'/images/mars.jpg'}, {title: '地球',描述:'没有什么地方像家一样.温暖、潮湿、大气恰到好处，地球是我们所知道的唯一有生命的地方——而且很多.喷气推进实验室的地球科学任务监测我们的家园星球及其变化，以便在我们深入宇宙时继续提供避风港."，图像:'/图像/地球.jpg'}];this.getPosters = function(){回归海报；};});

    感谢您的帮助！

    解决方案

    这只是解决方法，但它会起作用..

    angular.module('app', []).controller('Controller', function($scope) {$scope.posters = [{title: '火星',描述:美国宇航局的火星探索计划旨在了解火星是否曾经、现在或可能是一个宜居的世界.火星探路者、火星探索漫游者、火星科学实验室和火星勘测轨道飞行器等任务为了解火星宜居性提供了重要信息.这张海报想象了我们实现人类探索火星的愿景的未来一天，并怀旧地回顾了火星探索的伟大想象里程碑，这些里程碑有朝一日将被称为历史遗迹".',图像:'/images/mars.jpg'}, {title: '地球',描述:'没有什么地方像家一样.温暖、潮湿、大气恰到好处，地球是我们所知道的唯一有生命的地方——而且很多.喷气推进实验室的地球科学任务监测我们的家园星球及其变化，以便在我们深入宇宙时继续提供避风港."，图像:'/图像/地球.jpg'}, {title: '木星',描述:'没有什么地方像家一样.温暖、潮湿、大气恰到好处，地球是我们所知道的唯一有生命的地方——而且很多.喷气推进实验室的地球科学任务监测我们的家园星球及其变化，以便在我们深入宇宙时继续提供避风港."，图像:'/images/jupiter.jpg'}];})

    <头><script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script><script src="script.js"></script><body ng-app="app"><div ng-controller="控制器"><li class="list__item" ng-if="poster.title=='地球'" ng-repeat="海报中的海报">{{poster.title}}</li><li class="list__item" ng-if="poster.title!='Earth'" ng-repeat="海报中的海报">{{poster.title}}</li>

    </html>

    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!

    解决方案

    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天全站免登陆