ハイブリットアプリ開発で、最近monacaを使って趣味のアプリ作っていますが、特に作る上でAngularJSが深くかかわってくるので、よくインターネット解説を見ながら勉強しています。
それで、本題。
アプリ開発していて表示・非表示を内容により切り替えたいということがでてきました。
結果としては非常に簡単にできたのですが、ネット上ではng-ifを使ってのチェックボックスによるtrueかfalseの判定での表示切り替え方法ばかりヒットして、僕のやりたいユーザーのアクションなしに、データの条件式による切り替えってのが全然ヒットしない。
こんなやり方ばかりがヒットする。
<input type="checkbox" ng-model="checked" ng-init="checked=true" /> <span ng-if="checked" class="animate-if"> チェックボックスにマークされたら表示される。 </span>
できないのかなと思ってあきらめかけた時に、もしかして、ng-if内に直接条件式書けばいけるんじゃね？と思い付きでやってみたら、マジで動きました。リファレンスにも載ってないので、本来は使ってはいけないやり方なのかもしれないけど、動くには動くのでとりあえず試したいという人はやってみれば？
item.titleが空でなければ表示。
<span ng-if="item.title != ''">
{{item.title}}
</span>
要するに、ng-if内の条件式がtrueになるようであれば表示されるようです。 なので、これを使えばJSONを読み込んで、文字列であれば空データは表示しないとか、数字であれば値の大小によって切り捨てとかできるようになります。
直接タグ内に条件式書くのはちょっと・・・という人は、functionを使えばいいと思うよ。
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.display = function(foo) {
if (foo > 20) {
return true;
} else {
return false;
}
};
});
<div ng-controller='MainController'>
<span ng-if="display(foo)" >
条件に合致すれば表示
</span>
</div>
