Ng-Repeat 在 Heroku 上显示错误的值答案

【问题标题】：Ng-Repeat showing wrong values on HerokuNg-Repeat 在 Heroku 上显示错误的值
【发布时间】：2014-10-13 06:23:50
【问题描述】：

我开发了一个 Django 应用程序，它承载一些数据和一个登录信息，一旦登录，用户就可以与 Django 中的一个 Angular 应用程序进行交互。在我的本地机器上，一切正常。在 Heroku 托管的应用程序上，除了一件奇怪的事情外，一切正常。有一个特定的 ng-repeat 混淆了值。应该在“index”上显示的所有内容都显示在“index-1”上。这不会发生在我的本地托管应用程序上，它发生在我尝试过的每个浏览器的 Heroku 端。这是我的控制器文件中的相关代码：

sc.getMembers = function() {
    //get the list of members
    sc.editMemberPanel = [];
    sc.notTheOwner = [];
    sc.kickOutConfirmPanel = [];
    var members = mf.query({'id': sc.$storage.id},function(data){
        sc.$storage.members = [];
        for(i=0;i<members.length;i++){
            sc.$storage.members.push({
                name: members[i].fields.name,
                role: members[i].fields.role,
                phone: members[i].fields.phone,
                email: members[i].fields.email,
                status: members[i].fields.status,
                pk: members[i].pk
            });
            sc.editMemberPanel[i] = false;
            sc.kickOutConfirmPanel[i] = false;
            //if you own the band, you shouldnt be able to change your own status or email (or kick yourself out!).
            if(sc.$storage.yourUsername != members[i].fields.userName){
                sc.notTheOwner[i] = true;
            } else {
                sc.notTheOwner[i] = false;
            }
        }

    });
}
sc.getMembers();

请注意，我还将 $scope 注入为“sc”。这是视图文件中的相关代码：

<div class="panel panel-info" data-ng-repeat="(index, member) in $storage.members | orderBy: 'status'">
    <div class="panel-header" style="padding:10px;">
        <strong>{{member.name}}</strong>
    </div>
    <div class="panel-body">
        <div data-ng-hide="editMemberPanel[index]">
            <table class="table">
                <tr>
                    <td>Role</td>
                    <td>{{member.role}}</td>
                </tr>
            ...
            <button data-ng-show="$storage.isManager && notTheOwner[index]" class="btn btn-danger btn-sm" data-ng-click="kickOutConfirm(index, true)"><span class="glyphicon glyphicon-ban-circle"></span> Kick out member</button>
        </div>
        <form class="form-horizontal" role="form" name="editMemberForm" data-ng-show="editMemberPanel[index]">
            <div class="form-group col-xs-12">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" name="name" class="form-control" placeholder="E.g. Margaret Thrasher" data-ng-model="editMember.name" required /><br />
                </div>
            </div>
...

有两个按钮（踢出成员和编辑成员）。它们仅在特定情况下显示。现在，奇怪的是，当您单击它们时，它们会在正确的索引上执行功能，所以我知道“索引”变量是正确的。但是按钮显示在错误的成员下。每个都在“索引 - 1”成员上。但是，它们显示在正确的位置，所以就好像 Angular 正在使用现有的按钮并以某种方式推动它们。所有的 div 都是平衡的。我省略了几行代码（包括编辑成员按钮）。为什么 Heroku 会混淆按钮？哦，值得注意的是，在基本的 html 文件中，我从源代码中包含了 Angular JS。 (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js)

【问题讨论】：

标签： python django angularjs heroku

【解决方案1】：

我的问题是我在显示项目并添加“显示或隐藏”变量之前对其进行了迭代。然后这些项目在页面上以不同的顺序显示。迭代按插入日期进行，页面上的显示按字母顺序进行。通过在迭代中明确声明每个项目的索引，并按索引顺序显示它们，我能够解决这个奇怪的问题。我希望这对其他人有帮助。

【讨论】：