読者です 読者をやめる 読者になる 読者になる

牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

AngularJS で ng-repeat の中の ng-click でハマったのでメモ

AngularJS Javascript

(AngularJS1.0.7)

※このエントリーは何かの勘違いか間違い(1.0.7 から 1.2.0 にバージョン上げたら動かなくなった)
(angular1.0.7)

ページネーションの実装してて ng-repeat でページ番号を入れた配列を回して ng-click を表示させようとしたらリンクが効かなくてハマった。

問題

ng-repeat の外で

  <a href="" ng-click="currentPage = 2">2</a>

などとやるとリンクに飛べるのだが
下記のように ng-repeat の中の ng-click だとリンクに飛べなくなった

    <li ng-repeat="page in [1,2,3]">
      <a href="" ng-click="currentPage = {{ page }}">{{ page }}</a>
    </li>

webブラウザに表示してhtmlを確認すると ng-cliek の page が数字に展開されてない

原因その1

ng-repeat の中で配列要素をバインドする場合はオブジェクトにしないと行けないらしい。

    <li ng-repeat="page in [{'number':1}, {'number':2}, {'number':3}]">
      <a href="" ng-click="currentPage = page.number">{{ page.number }}</a>
    </li>

webブラウザに表示してhtmlを確認すると今度は ng-cliek の page.number 部分が数になってる。
しかしリンク飛ばない。

原因その2

ng-click の中で代入できないのが問題かなと思い、関数にしてみた

    $scope.setCurrentPage = function(number) {
      $scope.currentPage = number;
    };
    <li ng-repeat="page in [{'number':1}, {'number':2}, {'number':3}]">
      <a href="" ng-click="setCurrentPage(page.number)">{{ page.number }}</a>
    </li>

リンク飛べた。


メモ

  • Angularjs 凄いけどゴリゴリやると色々ハマりそう。
  • 追記2013-10-09: バージョンを1.2.0に上げたらリンク飛べなくなった。再調査。そのうち。。。