1

ng-repeat 配列を使用してルートを決定すると、アプリが間違ったページにルーティングされるという angularjs アプリに問題があります。

データは次のようになり、個人コントローラーでアクセスされます。

[
  {
    "name":"AJ lastname",
    "img_name":"AJ_lastname",
    "location":"Baltimore, Maryland",
    "info":"stuff"
  },
  {
    "name":"Albert lastname",
    "img_name":"Albert_lastname",
    "location":"Boston, Massachusetts",
    "info":"stuff"
  } // ... more data
]

html: (アンカー タグは、配列内のインデックスに基づいて人にリンクします (問題を解決するために変更する必要があると思われますが、よくわかりません)

<ul class="main-list">
  <li class="list-item fade" ng-repeat="student in students | filter:filter">
    <a href="/#person/{{$index}}">
    <img class="portrait listimg" ng-src="/images/{{student.img_name}}.jpg" alt="portrait of {{student.name}}">
    <h2>{{student.name}}</h2>
    <h4>{{student.location}}</h4>
    </a>
  </li>
</ul>

angular からのルーティング: (「/person/:itemId」を含むルートは、特定のユーザーに固有のページにルーティングされ、配列内のインデックスによって ID が決定されます)

app.config(function ($routeProvider, $httpProvider) {
  $routeProvider
    .when('/list', {
      templateUrl: './js/templates/list.html',
      controller: 'ListController'
    })
    .when('/person/:itemId', {
      templateUrl: './js/templates/person.html',
      controller: 'PersonController'
    })
    .otherwise('/list');
});

動的ページのコントローラーは次のとおりです。元の配列では完全に機能しますが、配列を並べ替えようとすると、インデックスが正しい学生に対応しなくなります。

app.controller('PersonController', function ($scope, $http, $routeParams) {
  $scope.person = 'Someone\'s name';
  $http.get('../js/students.json').success(function (data) {
    $scope.allStudents = data;
    $scope.studentId = $routeParams.itemId;
    $scope.student = data[$scope.studentId];
  });

したがって、機能上の問題は、インデックスが大きなデータ配列の最初の学生に適用されることです。完全に機能しているように見え、正しいデータがページに入力されますが、html/text 入力を使用してリストをフィルタリングすると、元のインデックスが html 側で更新され、元の配列に対応しません。したがって、ルーティングはそれらを間違ったページに送信します。

フィルタリングされたリストでもルーティングを機能させるにはどうすればよいですか?

4

2 に答える 2

1

これを行う1 つの方法ng-repeatは、 .

$scope.getIndex = function(student) {
    return $scope.students.indexOf(student);
}

次に、リスト内の関数を次のように呼び出すことができます。

<a ng-href="/#person/{{getIndex(student)}}">

ただし、これは想像できる最もパフォーマンスの高いコードではありません。

別の方法は、学生のインデックスを一時的にプロパティとして保存し、それを使用して参照することですが、これも最善の解決策ではありません。

$scope.students = $scope.students.map(function(student, index) {
    student.index = index;

    return student;
});

そしてリストで：

<a ng-href="/#person/{{student.index}}">

ただし、どうにかして学生に一意の ID を割り当てることができれば、それが間違いなく好ましい方法です。そうすれば、常に同じ学生を参照するようにもなります。students.jsonリストを作成してからユーザーがアイテムをクリックするまでの間に何らかの変更があった場合、間違ったアイテムを再度参照する可能性があります...

ちなみに、ng-hrefリンクにプレースホルダーを含めるときは常に使用してください。そうする必要がある理由は、Angular API docsで詳しく説明されています。

href 属性で {{hash}} のような Angular マークアップを使用すると、Angular が {{hash}} マークアップをその値に置き換える前にユーザーがクリックすると、リンクが間違った URL に移動します。Angular がマークアップを置き換えるまで、リンクは壊れ、おそらく 404 エラーが返されます。ngHref ディレクティブはこの問題を解決します。

于 2016-01-05T00:09:05.103 に答える
1

$scope の学生というオブジェクトを使用して ng-repeat を作成していますよね？これがコントローラーと同じ students.json から構築されている場合、学生 ID は論理的に同等である必要があります。したがって、href を「/#person/{{$index}}」から「/#person/{{student.studentId}}」に変更するだけです。

何らかの理由でそれらが同じでない場合は、学生オブジェクトを作成するときに、配列内のインデックスの値を保持する新しい属性 studentId を追加してから、前の提案を使用できます。

同一のオブジェクトがある場合に ng-repeat を使用するとエラーがスローされるため、「$index による追跡」を追加する必要があることを覚えておいてください。

于 2016-01-05T00:00:32.723 に答える