当前位置: 首页 > 面试题库 >

Angular-无法进行ng-repeat订单

马冯浩
2023-03-14
问题内容

我已经用orderBy尝试了许多ng-repeat的示例,但是无法使json与它一起工作。

<div ng-app>
    <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
    <div ng:controller="Main">
        <div ng-repeat="release in releases| orderBy:'environment_id'">      
            {{release.environment_id}}
        </div>
    </div>
</div>

还有JSON

function Main($scope) {
$scope.releases = {
    "tvl-c-wbap001 + tvl-webapp": {
        "timestamp": " 05:05:53 PM ",
        "environment_id": "CERT5",
        "release_header": "Projects/Dev",
        "date": "19 Oct",
        "release": "12.11.91-1"
    },
    "tvl-c-wbap401 + tvl-webapp": {
        "timestamp": " 10:07:25 AM ",
        "environment_id": "CERT4",
        "release_header": "Future Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap301 + tvl-webapp": {
        "timestamp": " 07:59:48 AM ",
        "environment_id": "CERT3",
        "release_header": "Next Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap201 + tvl-webapp": {
        "timestamp": " 03:34:07 AM ",
        "environment_id": "CERT2",
        "release_header": "Next Changes",
        "date": "15 Oct",
        "release": "13.12.3-1"
    },
    "tvl-c-wbap101 + tvl-webapp": {
        "timestamp": " 12:44:23 AM ",
        "environment_id": "CERT1",
        "release_header": "Production Mirror",
        "date": "15 Oct",
        "release": "13.11.309-1"
    },
    "tvl-s-wbap002 + tvl-webapp": {
        "timestamp": " 12:43:23 AM ",
        "environment_id": "Stage2",
        "date": "15 Oct",
        "release": "13.11.310-1"
    },
    "tvl-s-wbap001 + tvl-webapp": {
        "timestamp": " 11:07:38 AM ",
        "environment_id": "Stage1",
        "release_header": "Production Mirror",
        "date": "11 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap001 + tvl-webapp": {
        "timestamp": " 11:39:25 PM ",
        "environment_id": "Production",
        "release_header": "Pilots",
        "date": "14 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap100 + tvl-webapp": {
        "timestamp": " 03:27:53 AM ",
        "environment_id": "Production",
        "release_header": "Non Pilots",
        "date": "11 Oct",
        "release": "13.11.309-1"
    }
}

我写什么都没关系,我总是得到相同的顺序,或者我可能说根本没有顺序。


问题答案:

orderBy只适用于阵列-见http://docs.angularjs.org/api/ng.filter:orderBy

也是一个很好的过滤器,用于ng-repeat上的对象而不是数组@ [AngularjsOrderBy不起作用]



 类似资料:
  • 问题内容: 我有以下设置: 应用/指令 控制者 HTML: 这是一个非常简单的示例,但是我无法渲染它。也许有些教程没有告诉我,或者这是Angular的秘密知识? 如果我改为在and位置内删除该指令,它将显示所有记录。 但是我希望该指令比仅一个指令(最终)要复杂,以便可以在多个应用程序中重用此指令。 所以,我真的在问我们如何正确创建ng-repeat内的指令?我想念什么?上面的代码应该删除什么? 问

  • 问题内容: 我正在使用ng-repeat使用jQuery和TB构建手风琴。出于某种原因,这在进行硬编码时可以很好地工作,但是在ng-repeat指令内部时无法触发点击。 我以为问题出在jQuery,而不是事实之后绑定的元素。因此,我认为与其在页面加载时加载脚本,不如在返回数据时在.success上加载函数会更好。不幸的是,我不知道该如何做。 测试页 :http : //staging.conver

  • 问题内容: 嘿,我有这段代码: 它可以工作,但是我想在循环中添加一些额外的条件,例如: 我怎样才能做到这一点? 问题答案: 使用(或): 附加到元素,这将决定是否显示它。 ng- if的 文档可以在此处找到。 但是,如果只想在循环第一个或最后一个项目时执行某项操作,则也可以使用和的属性。这些已用ng- repeat记录 。可以这样使用:

  • 我已经开发了应用程序使用离子框架来显示客户当前的市场价格。我有问题在角js条件类与ng-重复循环。当市场发生变化时,我需要显示高(绿色)和低(红色)颜色,如果没有变化,以前的颜色应该为div显示,我使用了下面的代码查看 控制器: CSS 对于每一秒的速率将得到更新,所以若速率变得很高,那个么之前的速率应该应用css类。评分高颜色如果低意味着应用css类。rate highcolor else表示它

  • 问题内容: 我有这样的对象: 假设学生对象被改组。我使用ng-repeat来显示数据。我想按自定义顺序对对象进行排序。 例如,我想显示如下数据: 所以基本上,我想按学生的班级排序,但是首先是B_Class,然后是A_Class,然后是C_Class。另外,我想按学生姓名的字母顺序排序。我怎样才能做到这一点? HTML: 控制器: 问题答案: 嗨,您可以创建自定义排序过滤器,请参见此处http://

  • 问题内容: 我有一些关于jsfiddle的演示: HTML: JavaScript: 输入更改(甚至复选框)时,将调用日志过滤器。 仅当文本输入更改时,如何更改它并触发日志过滤器? 问题答案: 这是因为即使范围中的一个变量发生更改,Angular也会运行并更新所有范围属性。这称为“脏污检查”。 了解有关角度工作原理的更多信息:http : //www.sitepoint.com/understan