タイトル通り。
どうやら公式でもバグ？として認識してる模様。
https://docs.angularjs.org/error/ngRepeat/dupes
下記のようにして対応する。
<tr ng-repeat="task in tasks track by $index">
「track by $index」を書いてやると解決する模様。
【AngularJS】ng-repeatを使用した際に一瞬、倍の行数レンダリングされる問題。
【AngularJS】ng-includeで読み込んだテンプレート内のng-modelの値を正常に参照する。
ためには、読み込み先のHTMLで下記のように変数を指定してやる。
■親
<div ng-controller="hogeCtrl">
<div ng-include="'/child.html'"></div>
</div>
■子
<input type="text" ng-model="$parent.data.user" name="user">
【Javascript】オブジェクトをjson文字列に変換する。
var json = {
name: 'taro',
age: 18
};
JSON.stringify(json);
【AngularJS】Symfony2用のフォームテンプレートを作った。
下記URLを参考にして作ってみた。
https://gist.github.com/romaricdrigon/6291435
■form_theme.html.twig
{# This is an extension of Twig Form Theme #}
{# We redefine form elements, so they are binded with Angular model #}
{% extends "::form_div_layout.html.twig" %}
{# Make data available to current scope as $scope.data - will not work with hidden fields #}
{% block widget_attributes %}
{% spaceless %}
ng-model="$parent.data['{{ full_name }}']" {# we add Angular ng-model #}
id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %}
disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{
max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
{% for attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({},
translation_domain) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}{% endfor %}
{% if value is defined %} ng-init="$parent.data['{{ full_name }}']='{{ value }}'"{% endif %}
{% endspaceless %}
{% endblock widget_attributes %}
{# current controller submit() will called, instead of submitting the form #}
{% block form_start %}
{% spaceless %}
{% set method = method|upper %}
{% if method in ["GET", "POST"] %}
{% set form_method = method %}
{% else %}
{% set form_method = "POST" %}
{% endif %}
<form name="{{ form.vars.name }}" method="{{ form_method|lower }}" {% for attrname, attrvalue in attr %} {{ attrname
}}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %} novalidate>
<input type="hidden" name="_action" ng-init="$parent.action='{{ action }}'" />
{% if form_method != method %}
<input type="hidden" name="_method" value="{{ method }}" />
{% endif %}
{% endspaceless %}
{% endblock form_start %}
※ng-includeで取り込んだテンプレート内ではスコープが再生成されるので$parent.data~としてるところがポイント。
■angular側のフォーム描画部分。
※コントローラーの位置はここでなくても良い
<div
ng-include="formUrl"
ng-controller="FormCntl"
></div>
■コントローラーのJS
coreCtrls.controller('taskEditCtrl', ['$scope', '$routeParams', '$http', '$route', '$templateCache',
function($scope, $routeParams, $http, $route, $templateCache) {
$scope.formUrl = location.pathname + 'api/task/' + $routeParams.id + '/edit';
// フォームデータの入れ物を宣言。
$scope.data = {};
// $scope.actionにポスト先のURLが格納されている。
$scope.submit = function() {
$http.post($scope.action, reconstruction($scope.data)).success(function() {
$templateCache.removeAll();
$route.reload();
});
}
}
]);
※reconstruction()はsymfonyのバリデーションを通過させるためにオブジェクトの構造を構築し直す俺々メソッド。jQuery.ajax()とAngularの$http.post()でサ
ーバー側に送信される構造が違う所為でくっそハマった。
【AngularJS】モデルの初期値をディレクティブから設定する。
普通にインプット要素のvalueに値を設定しても、angularにパースされた時点で初期値としては認識されなくなってしまうので、
ng-initディレクティブを用いてモデルに値をセットする。
<!-- 下記の通りvalue=""に値をセットしてもパースされた時点で無いものとされてしまうのでng-initを使用する --> <input type="text" ng-model="hoge" ng-init="hoge='piyopiyo'" value="piyopiyo">
【AngularJS】Animate.jsを用いてアニメーションさせる。
まずは本体を読み込む。
<link href="animate.css" rel="stylesheet" />
cssを下記の通り定義してみる。
[ng-view].ng-enter {
-webkit-animation: fadeInRight 1s;
animation: fadeInRight 1s;
}
全アニメーション一覧は下記URLを参照。
http://daneden.github.io/animate.css/
【AngularJS】アニメーションを使用する。
angular本体を読み込んだ後にangular-animateを読み込む。
<script src="angular.js"></script> <script src="angular-animate.js"></script>
コアモジュールに読み込ませる。
var app = angular.module('app', [
'ngAnimate'
]);
これで特定のディレクティブにアニメーション用のクラスが自動的に振られるようになるので、それをCSSで制御してあげればOK。
angular1.2.5で有効なディレクティブとアニメーションは下記の通り。
| Directive | Supported Animations |
| ngRepeat | enter, leave and move |
| ngView | enter and leave |
| ngInclude | enter and leave |
| ngSwitch | enter and leave |
| ngIf | enter and leave |
| ngClass | add and remove |
| ngShow & ngHide | add and remove (the ng-hide class value) |
下記例。
■HTML
<div ng-view class="hoge"></div>
■CSS
/* enter 処理の開始値 */
.hoge.ng-enter {}
/* enter 処理の終了値 */
.hoge.ng-enter-active {}
/* leave 処理の開始値 */
.hoge.ng-leave {}
/* leave 処理の終了値 */
.hoge.ng-leave-active {}
Animate.cssと併せて用いるとベスト。
【AngularJS】テンプレートのキャッシュを削除する。
$route.reload()をする時にテンプレートの内容が更新されないことがあるけど
下記のようにキャッシュをクリアしてやれば解決。
$templateCache.removeAll();
下記のようにするとng-viewが更新された際は自動的にキャッシュクリアを行ってくれる模様。
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
色々と便利だなぁ。