AngularJS ng-controllerの外から値を操作する方法

AngularJSでチェックボックスの値をng-controllerの外の要素をクリックした時に変更したいということがあったのでその方法になります。

下記はtestというボタンをクリックしたらAngularJSのController内にあるチェックボックスの値が変化して、さらにそれに応じて別のフォームが入力必須の状態になるという内容です。

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="test()">test</button>
<div ng-app="myApp">
  <div ng-controller="myController">
      <form name="testForm">
          <div id="testElement"><input type="checkbox" name="test" ng-model="test" ng-init="test=''"></div>
          <input type="text" name="name" ng-model="name" ng-required="test==true">
          <span ng-show="testForm.name.$error.required">入力してください</span>
          <span ng-show="testForm.name.$valid">OK</span>
      </form>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope) {
}]);

function test() {
  var element = document.getElementById("testElement");
  var change = angular.element(element).scope();
  change.$apply(function(){
    change.test=true;
  })
}
</script>
</body>
</html>

jQueryを活用してcheckboxのchecked属性の切替えをしたい場合

※あらかじめ対象のタグに#checkBoxを加えておいてください。

checkedを外す場合

$(function(){
    $("#checkBox").prop("checked",false);
});

checkedをつける場合

$(function(){
    $("#checkBox").prop("checked",true);
});

iOSでフォーム要素を選択した時にズームしない為のviewportの記述方法

幅640pxで指定した場合の記述になります。

フォーム部分のフォントサイズは必ず16px以上に設定してください。またemやremで設定してもズームしてしまうことがありますのでpx指定がおすすめです。

<meta name="viewport" content="width=640, user-scalable=no">

JavaScriptでアドレスバーのURLの記述を変更する方法

クリック時の処理等に追加することでアドレスバーのURLの表示を自由に変更することが可能になります。

現在のURLのアドレス以下を変更する場合

例 http://hogehoge.com/ooo/abc → http://example.com/ooo/abc

history.replaceState('','','abc');

トップページURLのアドレス以下を変更する場合

例 http://hogehoge.com/ooo/abc → http://example.com/abc

history.replaceState('','','/abc');

現状のパラメーター等を残しつつさらに記述を追加していく場合

history.pushState('','','abc');

URLの#以降が変化した時に処理を加える方法

URLの#以降はURLフラグメントと言いますが、アンカーリンクをクリックした場合等に何らかの処理を加えたい場合等に利用します。

function hashChange() {
  //ここに実行したい処理を書く
}
window.onhashchange = hashChange;

URLの#以降の呼び方は何というのか

下記の記述で現在のページのURLアドレスを取得することが可能です。

よく使用される言葉としては下記になります。

  • URLフラグメント
  • ページ内アンカー
  • URLのハッシュ値
  • ページ内リンク
  • アンカー
  • アンカー名
  • location.hash
  • フラグメント識別子

この中でいうと一般的に正式な用語として利用されるのは「URLフラグメント」みたいです。

JavaScriptで現在のページのURLアドレスを取得する方法

下記の記述で現在のページのURLアドレスを取得することが可能です。

var href = window.location.href ;

またホスト名だけ取得したい場合は下記の記述になります。

var hostname = window.location.hostname ;

CSSでスマホでリンクをタップした時に色が変わらないようにする方法

スマホでちょっと気になるのが、リンク箇所をタップした時に色が変わったりする点です。
そこで今回はCSSでタップ時の色を消す方法をご紹介します。

下記をaタグに指定してください。

rgba(0,0,0,0)」の値を変えることでタップ時の色を指定することも可能です。

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}