こんにちは。 CSSって簡単なようで深いですよね。 今回は、vertical-alignがうまく効かないときのTipsです。 vertical-alignって? よくtext-alignは見ますよね。テキストを左、右、中央揃えどこにするか指定するCSSプロパティの一つです。 vertical-alignは縦位置の指定です。 vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 引用:vertical-align-スタイルシートリファレンス divで要素を真ん中にしたいけど効かないよ! 実はvertical-alignはブロック要素では適用できません。 インライン要素とテーブルセルだけなんです。 なのでtableとかでは凄く簡単に中央に来てくれます。 もちろんdivなどでできないわけではありません。displayプロパティで明示
プログラムの要件としては以下の通りです。 APIから上記のFruitsとUserを取得した結果に基づきビューを生成する。 User内のLikeFruitsはFruitsをマスタとしてチェックボックスを用いて更新する。 Userを受信した際にLikeFruitsに含まれていた値はチェック済みとする。 実装例 チェックボックスとのバインディング実装した例が以下になります。 Array Binding CheckBox 挙動としては以下のようになります。 チェック前 チェック後 チェックボックスと配列をバインディングする際に意識する点は二つあります。 一つはチェック状態をどのように評価するか。 もう一つはチェックのイベントでの挙動をどのようにするかです。 チェックの評価 今回の例ではチェックの評価は以下のように行っています。 <ul ng-repeat="(fruitId,fruitName)
I have a few checkboxes: <input type='checkbox' value="apple" checked> <input type='checkbox' value="orange"> <input type='checkbox' value="pear" checked> <input type='checkbox' value="naartjie"> That I would like to bind to a list in my controller such that whenever a checkbox is changed the controller maintains a list of all the checked values, for example, ['apple', 'pear']. ng-model seems to o
angular.module('myApp', []); angular.module('myApp').controller('loopCtrl', function($scope) { $scope.files = [ {"name":"file1.jpg","extension":"jpg","checkFlug":false}, {"name":"file2.html","extension":"html","checkFlug":false}, {"name":"file3.xml","extension":"xml","checkFlug":false}, {"name":"file4.js","extension":"js","checkFlug":false}, {"name":"file5.py","extension":"py","checkFlug":true} ];
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。(ただし最近の処理系ではconst扱いになって上書
ng-repeatのビルトイン変数を利用してtableの背景色を一行おきに設定 AngularJSのng-repeatディレクティブで利用できる変数 ng-repeatの組み込み(ビルトイン)変数は利用頻度が高いプロパティ。 AngularJSの公式サイトでは以下のURL(英語)で使い方を確認できる。 https://docs.angularjs.org/api/ng/directive/ngRepeat 本記事では、 $index $middle $even $odd を利用してtableタブ内における繰り返し処理で、ng-repeatの組み込み変数を使ったサンプルを紹介する。 サンプルコード headタグ内では、foundation(cssフレームワーク)とangularjs本体を読み込み、サンプルとなるModelデータを定義している。 <html ng-app="webEnginee
bool値や条件式の結果に応じてclass属性を追加するAngularJSのng-class true/falseに応じてclassを設定 AngularJSのng-classでは、HTMLのclass属性を動的に設定することができる。 ng-classのベーシックな例が以下のコードになる。 <div ng-class="{second: true}" class="first">sample</div> ng-classを利用してsecondというclass属性を追加するコードになるが、条件をtrueではなくfalseにするとclass属性は追加されなくなる。 上の例はbool値を直接記述しているが、変数や条件式をダイレクトに書くこともできる。 以下の例は各行のdoneの値に応じてredというclass属性を設定する例になる。 <tr ng-repeat="e in todo.tasks
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く