AngularJS で無駄にハマる。 built-in-directives #JavaScript

AngularJS Advent Calendar 2015 1日目の投稿です。

宣言通りにあるある的なものを紹介していこうかと思います。
すっごいしょうもないけど、やってしまいがちなものシリーズです。

ng-options の使い方が覚えられない

書き方多すぎ。少なくともボクには無理です。
「あ！こっちの書き方でいけば上手くいく！」みたいな発想は起きません。ただただ悶えます。

for array data sources:
　label for value in array
　select as label for value in array
　label group by group for value in array
　label disable when disable for value in array
　label group by group for value in array track by trackexpr
　label disable when disable for value in array track by trackexpr
　label for value in array | orderBy:orderexpr track by trackexpr (for including a filter with track by)
for object data sources:
　label for (key , value) in object
　select as label for (key , value) in object
　label group by group for (key, value) in object
　label disable when disable for (key, value) in object
　select as label group by group for (key, value) in object
　select as label disable when disable for (key, value) in object

ng-include="xxx.html" でテンプレートが読み込めない

これを見てサクッと理解できた方は、確実にこの経験をされているのでしょう。
この症状としては、実際に xxx.html ファイルが存在するにも関わらず、読み込まれないし、エラーを吐くこともありません。
原因はいたって単純で、 ng-include に渡す値は AngularJS でいう expression であるためです。

"xxx.html" と記述するということは、 $scope.xxx.html を参照するということです。もちろんそんなつもりで記述していないし、そんなプロパティも存在しないため読み込まれません。かつ、AngularJS のテンプレートは、存在しないモデルについてはスルーしてくれる優しさをもっているためエラーすら吐きません。
正常に読み込まれるようにするためには、 ng-include="'xxx.html'" とするのが正しいです。

同様の仲間に ng-switch-when がいます。こいつはもっと間違えやすくて、 ng-switch が expression で受け付けるのに ng-switch-when に渡す値は String のみです。うっかりモデル名を渡してしまうと、いつまでたっても表示されません。こちらについても併せて覚えておくと良いでしょう。

ng-form="xxx" が効かない

入れ子構造のフォームを動的に作成するときなどには ng-form が有効です。親のformタグと入れ子にすることができる優れものです。しかしながら以下のように書いてしまうとなんの効果も発揮しません。
多くの場合、バリデーション機能が正しく動作しないことで気づきます。

<form name="parentForm">
  <table>
    <tbody>
      <tr ng-repeat="x in y">
        <ng-form="childForm_$index">
          <td><input type="text" name="name_$index" ng-model="x.model" required></td>
        </ng-form>
      </tr>
    <tbody>
  </table>
</form>

この場合は、trタグに ng-form を指定すると期待通りに動作します。

<form name="parentForm">
  <table>
    <tbody>
      <tr ng-repeat="x in y" ng-form="childForm_$index">
        <td><input type="text" name="name_$index" ng-model="x.model" required></td>
      </tr>
    <tbody>
  </table>
</form>

input[checkbox] でng-valueを指定するも...

正しく動きません。
普段は true/false だけが取れれば良かったりして、あまり意識することがありません。たまにある「"1"/"0" でリクエスト送ってください」とかいうケースで、さらっと書くと怪我をします。
ngValue の API Docs を見ると以下のように書いてあるんで騙されやすいですよね...

<input
  [ng-value="string"]>
...
</input>

ただし、input[checkbox] のページで ng-value がないことが明らかになります。

<input type="checkbox"
       ng-model="string"
       [name="string"]
       [ng-true-value="expression"]
       [ng-false-value="expression"]
       [ng-change="string"]>

input[checkbox] に対してはng-true-valueとng-false-valueを使いましょうとのこと。あったねそんなやつ...

まとめ

Angular経験者なら大体やってるはず。