カテゴリー: JavaScript

INPUT TAG IN NG-REPEAT 2

このエントリーをはてなブックマークに追加

昨日動かないといっていた問題解決しました。

ネットをさまよっていると、、

http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs/14379763#14379763
参考になりそうな質問を発見！

公式ではできないってことになってるけど、解決策としてng-repeatの中でng-formも生成すればvalidation効くようになるよ☆

なるほど。ng-formも一緒生成すればそこのcallbackにちゃんと設定されるってことですね。

やってみた・・・。動かない・・・。なーぜー？

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="form[field.name].$dirty && form[field.name].$invalid">
			<span ng-show="form[field.name].$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

と思ってよく見比べてみたら、validationをform[…]がinnerFormになっていることに気付くΣ

外のほうのformの中のフィールドに中からはアクセスできないのね。

昨日試した感じ外からはこの方法でアクセスできた気がするんだけど。
いろいろ綺麗に書き直して、、、

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }} {{ (field.required) ? '*' : '' }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="innerForm.$dirty && innerForm.$invalid">
			<span ng-show="innerForm.$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

以上！すっきり。

input tag in ng-repeat

このエントリーをはてなブックマークに追加

AngularJS使ってるんだけど。

ng-repeatの中でinputつくったら入力してもvalidationとか効かにゃい。

なんてこった。Σ(๑ l 口 l ๑ )

ng-repeatの外で同じ名前でinputつくると外のほうのinputは反応する。外のほうで入力すると中のほうも効くようになる・・・。

ぐぬぬ。解決策探し中。

→ 解決編

JavaScript Get URL Parameter

このエントリーをはてなブックマークに追加

JavaScriptでURLからGETパラメータを取得するとき毎回面倒だなーって思ったので、はじめにこういうの入れとくのはどうでしょ。

こうしとけば、あとは$_GET[‘parameter’]で取得できますね！

なんとなく変数はPHP風。

$_GET = new Object();
if (window.location.search.length > 1) {
	var query = window.location.search.substring(1);
	var parameters = query.split('&');
	for (var i = 0; i < parameters.length; ++i) {
		var kv = parameters[i].split('=');
 		if (kv.length >= 2) {
			var name = decodeURIComponent(kv[0]);
			var value = decodeURIComponent(kv[1]);
			$_GET[name] = value;
		}
	}
}

Using Bower

このエントリーをはてなブックマークに追加

今日はBowerの紹介です。

BowerはTwitter社が作ったフロントエンド用のパッケージマネージャです。

bowerはnpmでインストールできます。
> npm install -g bower

> bower install ＜パッケージ名＞
と実行するだけで、大抵の有名なパッケージがインストールされます。

パッケージインストール先を変える場合は、.bowerrcというファイルをつくり、以下のように指定します。
{
“directory”: “assets/vendors”
}

依存関係のファイルを生成しておくと最新版に更新したりできて便利です。

> bower init
で初期化します。初期化するといくつか質問されます。適当に答えるとbower.jsonが生成されます。

インストール時に–saveオプションを付けると自動的にbower.jsonに依存関係が追記されます。

＜要約＞
npm install -g bower
bower init
bower install <パッケージ名> –save

以上です！