2014年03月15日

AngularJSでタブパネル

タブパネルシリーズをAngularJSで。



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a.active{
font-weight:bold;
}
</style>
</head>
<body>
<div ng-app="tabPanel" ng-controller="tabPanelCtrl" ng-click="tabChange($event)">
<a href="#tab1" ng-class="{'active':tabSelected=='#tab1'}">tab1</a>
<a href="#tab2" ng-class="{'active':tabSelected=='#tab2'}">tab2</a>
<a href="#tab3" ng-class="{'active':tabSelected=='#tab3'}">tab3</a>
<div id="tab1" class="ng-hide" ng-show="tabSelected=='#tab1'">CSS1</div>
<div id="tab2" class="ng-hide" ng-show="tabSelected=='#tab2'">CSS2</div>
<div id="tab3" class="ng-hide" ng-show="tabSelected=='#tab3'">CSS3</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module("tabPanel",[]);
app.controller("tabPanelCtrl",function($scope){
$scope.tabSelected = "#tab1";
$scope.tabChange = function(e){
if (e.target.nodeName === 'A') {
$scope.tabSelected = e.target.getAttribute("href");
e.preventDefault();
}
}
})
</script>
</body>
</html>
タグ:AngularJS
posted by ねこまんま at 11:31 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2014年03月04日

AngularJS1.2でng-bind-html-unsafe属性が使えない

AngularJS1.2でng-bind-html-unsafe属性が廃止されたらしく使えない。じゃあどうやってHTMLを突っ込むかというと、この記事によると以下のdirectiveを追加すると利用できるようになるみたい。

app.directive('bindHtmlUnsafe', function( $parse, $compile ) {
return function( $scope, $element, $attrs ) {
var compile = function( newHTML ) {
newHTML = $compile(newHTML)($scope);
$element.html('').append(newHTML);
};

var htmlName = $attrs.bindHtmlUnsafe;

$scope.$watch(htmlName, function( newHTML ) {
if(!newHTML) return;
compile(newHTML);
});

};
});
posted by ねこまんま at 23:50 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのスコープ

ng-appのみを指定した場合グローバルにスコープが取られるが、名前空間を指定することでスコープを限定することができる。module()でスコープが指定できる

var app = angular.module("Hello",[]);
app.controller("HelloCtrl",function($scope){
$scope.hello = "world";
});


<body ng-app="Hello">
<div ng-controller="HelloCtrl">
<p>{{hello}}</p>
</div>
</body>
posted by ねこまんま at 23:24 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng属性の書き方

AngularJSではng属性に複数の記述方法が用意されている

<input type="text" ng-model="text">
<input type="text" ng:model="text">
<input type="text" data-ng-model="text">
<input type="text" x-ng-model="text">


原理向けにカスタムデータ属性まで用意されているのが素晴らしい。
タグ:AngularJS
posted by ねこまんま at 23:12 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSで表示非表示を切り分ける



AngularJSで表示非表示を切り分けるにはng-hide属性やng-show属性を利用します。class="ng-hide"を指定するとひとまず非表示になるのであとはモデルの値によって表示を切り分けます。

<div class="ng-hide">show</div>


モデルの値が文字列の場合は属性にモデルを引き渡すだけ。

function todosCtrl($scope){
$scope.todos = "aa";
}


<div ng-show="todo" class="ng-hide">show</div>


モデルの値が配列の場合はmodel.lengthで条件を指定できる。(配列に値があるかどうか)

function todosCtrl($scope){
$scope.todos = ["aa","bb"];
}


<div ng-show="todos.length" class="ng-hide">show</div>


ちょっとはまったけどオブジェクトの場合はObject.keys(model).lengthで判定できる。ただし$scope.Object = Object;としてスコープにObjectオブジェクトを受け渡さないとダメ。

function todosCtrl($scope){
$scope.Object = Object;
$scope.todos = {"aa":"aa","bb":"bb"};
}


<div ng-show="Object.keys(todos).length > 0" class="ng-hide">show</div>
posted by ねこまんま at 15:00 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2014年02月28日

AngularJSでeventオブジェクトを取得

ng-clickやng-keyupイベントの指定時に$eventを引数に渡してあげればeventオブジェクトを取得できます。

以下のサンプルはToDoリストにエンターを押して追加するパターン

function todosCtrl($scope){
$scope.todos=[];
$scope.addTodo = function(e){
if(e.keyCode !=13)return false;
$scope.todos.push($scope.add_todo);
$scope.add_todo="";
}
}


<body ng-app>
<div ng-controller="todosCtrl">
<input type="text" ng-model="add_todo" ng-keyup="addTodo($event)">
<ul>
<li ng-repeat="todo in todos track by $index">{{todo}}</li>
</ul>
<div>
</body>
タグ:ng-click ng-keyup
posted by ねこまんま at 13:16 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-repeatでエラー

AngularJSで以下のようなコードでエラーが出た。

function todosCtrl($scope){
$scope.todos=["aa","aa];
}


<ul>
<li ng-repeat="todo in todos">{{todo}}</li>
</ul>


エラー内容は以下のとおり。

Error: [ngRepeat:dupes]


エラーページを確認するとng-repeatは配列のvalueを元にループを回すので同じ値があるとエラーになるっぽい。ng-repeat指定時に「track by $index」を追加するとkeyを元にループを回すので大丈夫なようです。

<ul>
<li ng-repeat="todo in todos track by $index">{{todo}}</li>
</ul>
posted by ねこまんま at 13:06 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする