ng-repeat 选择列表中的初始值

2024-03-17

请帮助 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();

}]);

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

});

感谢帮助!


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

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-repeat 选择列表中的初始值 的相关文章

  • 将对象拖到可排序列表中 - AngularJS

    Problem 我正在尝试从 jQuery 重新创建 Draggable Sortable 功能 但无法将删除的元素放入我的对象数组中 我想拖一个 draggable 按钮进入 sortable 列表 我希望按钮代表一个具有属性的对象 可以
  • ng-repeat 插入空锚标记

    我正在尝试使用角度创建一个菜单 菜单项可以有子项 需要另一个 ng repeat 来打印子导航项 当尝试在第二个 ng repeat 中插入锚标记时 我注意到一些奇怪的行为 小提琴链接 http jsfiddle net npU7t htt
  • Angularjs:当滚动到达div中滚动条的底部时如何触发事件?

    我试图在滚动条到达末尾时触发一个事件 我找到了这个这个例子 http jsfiddle net ADukg 4831 这是我的代码 问题是它根本不调用 load more 控制台语句的值为 848 899 in scroll 881 899
  • 项目组织和命名约定

    这在某种程度上是后续每个模块组件重复模块名称 https stackoverflow com questions 25005897 repeating module name for each module component问题 我们决定
  • 角度 ui-grid 自定义标题 html

    我正在尝试将 glyphicon glyphicon thlist 我可以单击并调用控制器函数 添加到默认标题的左侧 我采用了默认标头并尝试操纵它来执行此操作 默认标头位于 https raw githubusercontent com a
  • 如何在单元测试中的请求之间更改 $httpBackend when[method] 语句?

    在我的测试中 我启动一些模型数据并模拟响应 beforeEach function var re new RegExp http users online httpBackend whenGET re respond id 12345 us
  • AngularJS 1.X 中的异步调用是如何工作的? $Http 调用没有返回值

    我有以下名为的函数getvalue 它与控制器一起位于 AngularJS 模块内 我试图在单击事件上调用此函数 调用控制器中的另一个函数 我希望我很清楚 功能 function getvalue Data http var value u
  • ng-repeat 仅具有特定属性值的对象 - 自定义过滤器?

    假设我有一个 JSON 对象 用户 其中包含一些基本属性 例如 名称 地址 角色 等 我希望 ng repeat 只吐出属性 角色 等于 管理员 的对象 我该怎么做呢 我正在考虑类似自定义过滤器的东西 或者可能创建一个范围变量 将匹配的对象
  • 从 mvc web api httpresponse 生成 csv 并通过 angularjs 接收以供下载

    我正在尝试从我的 Web api 生成一个 CSV 文件并通过 angularjs 接收该文件 我有一个如下所示的 API 控制器 HttpPost public HttpResponseMessage GenerateCSV FieldP
  • AngularJS:理解 $rootScope.$on('$routeChangeSuccess

    我正在开发登录页面 成功后 它会重定向到主页 默认情况下 我显示登录页面以下代码 app run function rootScope location rootScope on routeChangeSuccess function lo
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • 如何在 iOS 中使用 Cordova 文件传输插件下载文件

    我使用以下代码来下载文件 scope onDownloadMusic function live var downloadUrl offlineUrl fileName var hostUrl encodeURI live url var
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • 将 bootstrap 迁移到 v4 - 弹出窗口不起作用

    我在将 Bootstrap 从版本 3 迁移到版本 4 时遇到问题 问题在于弹出窗口和 popper js 库 每次我将鼠标悬停在某个元素上时 都会收到此错误 未捕获的类型错误 无法读取未定义的属性 indexOf 在 v computeA
  • 动态分配 ng-model

    我正在尝试从对象数组生成一组复选框 我的目标是让复选框动态地将其 ng model 映射到将提交到数组中的新对象的属性 我的想法是这样的 li li
  • 通过外部控制进行 AngularJS 智能表过滤

    我试图找出合并 st table st safe src 的正确方法 并通过表本身之外的控件过滤数据 用户可以添加 编辑和删除数据 这就是我使用安全源的原因 任何例子或反馈都会很棒 查看此示例 其中包含从智能表中添加 编辑 删除行的选项 h
  • 喜欢和不喜欢用户对产品的评论

    用户架构 var UserSchema new Schema review likes type String review dislikes type String 审查架构 var ReviewSchema new Schema pro
  • 如何将一个“模型”映射到两个字段?

    我有一个具有 高度 属性的模型 我希望允许用户将其编辑为两个单独的字段 英尺 和 英寸 但让它们映射到以英寸为单位测量的单个属性 高度 表格看起来像这样 在这些字段和单个 高度 属性之间创建双向绑定的最佳方法是什么 HTML
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页

随机推荐