常連

初めまして。
AngularJS,HTML,CSSの環境で開発中です。
この度、フローティングメニューをcssとhtmlを用いて実装する運びとなりましたが、
このフローティングメニューがスクロールした時に、Formのテキストボックスの後ろに入り込んでしまい、
少しでも重なっているとボタンを押せなくなり困っています。
最前面に出すことを第一に、できれば、ボタンが重なっていてもテキストボックスに問題なく入力できるようにできないでしょうか。

尚、重ならない位置にボタンを…というのは解決にはならないのでご遠慮下さい。

以下、コードの抜粋となります。
```lang-html
<style>
div#floating-menu {
	position: fixed;
	top: 50px;
	width: 0px;
	height: 0px;
	right: 50%;
	z-index: 9999;
}
</style>

<html>
  <body>
    <div id=floating-menu>
      <input type="submit" value="Save">
    </div>
  </body>
</html>


```
回答、お待ちしております。

フローティングメニューをどの要素よりも最前面に出したい

最近AngularJSを勉強し始めたのですが、調べ物をしているとデータを表示する時にjsonファイルを利用していることが多く見受けられるのですが、なぜjsonなのでしょう。
javascriptの配列ではだめなのでしょうか。
もしくは配列を使うのも同じくらい一般的なのでしょうか。

例えば、大学の時間割のアプリを作りたいとします。
データ１つに対する項目として、
・曜日（0=mon,1=tue...)
・時限
・授業名
・先生の名前
・教室
などがあるとします。

配列の場合だと
```javascript
[1,2,"有機化学","山田","3-D"],
[2,3,"無機化学","田中","1-B"]
```
のように非常に簡潔に書けますが、jsonだと

```json
  { 
      "week":1,
      "time":2, 
      "subject":"有機化学",
      "teacher":"山田",
      "room":"3-D",
   },
  { 
      "week":2,
      "time":3, 
      "subject":"無機化学",
      "teacher":"田中",
      "room":"1-B",
   },

```
のようになりますが、10個くらいなら確かにコードも読みやすくていいと思うのですが、
これが100種類、200種類になるとデータ量が「無駄に」膨大になるしメリット薄い気がするんですが、実際どうなんでしょうか。
これはAnglarJSで使う場合の話です。

あと、少し話がそれますが、
ng-repeatは「全」項目をリピートしますが、実際「全」項目リピートってそんなに使うかなって思うんですが、あるとすれば例えば時限が「２」のもの曜日が「１」のもののように、膨大なデータの中から条件を決めて抽出するほうだと思います。
こういうときって普通にifなどで絞り込んでからng-repeatを用いるのですか？
質問ばかりで恐縮ですが、よろしくお願いします。

jsonファイルのメリット

###前提・実現したいこと
visual studioでJSファイルを用いてC#で書いたコントローラとの連携を行おうと考えています。
そのためにajax通信を用いているのですが、うまくデータがpostできません。
コンソールで受け取ったデータの出力も行なっているのですが、何も表示されません。

###該当のソースコード
```JSファイル
var app = angular.module('myApp');

app.controller('myController', ['$scope', function ($scope) {

var str = "test";
var data = {};

   $.ajax({
       type: "POST",
       url: "/Test/Hoge",
       data: str,
       async: false,
       success: function (ret) {
           data = ret.Data;
       },
       error: function (e) { }
   })
}]);
```

```C#ファイル
public class TestController : Controller
   {
public JsonResult Hoge(string str)
       {
           Debug.WriteLine("アクセス成功");//アクセスできているかの確認
           Debug.WriteLine(str);//デバッグ用 何も表示され無い  

//以下何かしらの動作の記述...

       }
}

```

ajaxを用いてC#のコントローラへのPOST

###前提
AngularでWebアプリを開発している中での質問です。（超初心者です。）

test.component.tsではAngularのHttpClientを利用して
外部ネットワークに格納されているpageSize配列の0番目を取得し、
TestService側で宣言した"res"に格納しています。（TestService.tsのparamsGetPageSize） 

その後、test.component.tsで取得したpageSize配列の0番目が格納された"res"を
TestService.tsのparamsGet関数で利用します。

###意図
TestService.tsのコードを見ていただければ分かる通り、
paramsGetPageSizeとParamsGetは
postParam = postParam.set('pageSize', ＊＊＊);の＊＊＊部分が固定値か、変数か以外に違いはありません。
pageSizeのような環境変数は外部に置いておき、それを読み込むようにしたいという意図があり、
pageSizeを読み込むための関数は固定値（仕方なし）、それ以外でparamsGet関数を利用する場合は、
取得した変数を用いる、という処理にしています。

このparamsGet関数は様々な場面で利用されます。

###質問
非同期なのが原因かと思いますが、test.component.tsで取得したpageSizeがresに格納される前に
TestService.tsのparamsGetが実行されてしまうため、resがundefinedのまま処理が進んでしまいます。

paramsGetが実行されるとき、resがundefinedの場合は値が格納されるのを待って処理を開始する、という方法があればご教授いただけないでしょうか。

よろしくお願いいたします。

###urlEncoder.ts
```TypeScript
import { HttpParameterCodec } from '@angular/common/http';

export class UrlEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }
}
```

###TestService.ts
```TypeScript

import { HttpClient, HttpParams } from '@angular/common/http';
import { UrlEncoder } from 'urlEncoder.tsのパス';

export class TestService{
  // test.component.tsから取得できるように宣言
  public res = "";
  constructor(private http: HttpClient) { }

  private setRequestParams(): HttpParams{
    let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() });
    httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。
  }

    paramsGetPageSize(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // 固定値を使用
          postParam = postParam.set('pageSize', '100');
          return this.http.get(path, { params: postParam });
    }

    paramsGet(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // test.component.tsで取得したthis.resを利用
          postParam = postParam.set('pageSize', this.res);
          return this.http.get(path, { params: postParam });
    }
};
```
###test.component.ts
```TypeScript
import TestService from {'Service.tsのパス'};

@component{
  略
}

export class TestComponent implements OnInit{
  constructor(
    private test: TestService,
  )

  ngOnInit(){
    this.test.paramsGet('http://------').subscribe(res => {
      this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得
      // サービスのプロパティに代入
      this.test.res = this.response;
    } );

   this.test.paramsGet('*******').subscribe(
    処理
   );
  }

}
```

Angularで非同期処理によって取得した値が格納されるのを待ってから、後続の処理を実行したい

JS初心者です。よろしくお願いします。

コードでよく下記のような書き方を見かけますが、これの意味はなんでしょうか？
```Javascript
var self = this;
```

今AngularJSの習得を目指しているのですが、下記も同じ意味ですか？
```AngularJS
var self = $scope.self = this;
```

[JS] var self = this の意味は？

input/fileタグを使ってローカルの画像をアップロードさせる方法はもちろんわかるのですが、見た目があまり良くないと思っていて、以下のようなアイコンをクリックしたらファイルをアップロードするウィンドウを開くものを作りたいと思っています。

![画像アップロードアイコン](2f30667621ad090f6cc9240ce3f2eabc.png)

これはnoteというサービスの仕様で、ソースを見るとクリックイベントを設定してアップロードしているようなのですが、どのように記述すればファイルをアップロードするウィンドウを開けるのかがわかりません。
また、いろいろ調べてみたのですが、そのような情報が一切出てこなかったので、ぜひわかる方に教えていただきたいです。
関係あるかわかりませんが、AngularJSで開発をしています。

よろしくお願いいたします。

input/fileタグを使わないでローカルから画像をアップロードさせる方法を教えてください。

###前提・実現したいこと
bootstrapのtooltipを最前面に表示したい

###発生している問題・エラーメッセージ
angularJS環境内でbootstrapのtooltipを使用していますが、どうしても他の要素に隠れてしまいます。
（例：grid内にtooltipをおいた場合、gridのヘッダー内でしか表示できず、見切れてしまう）

書き方としては以下のように書いています。
```
<div class="アイコン画像"  uib-tooltip="{{内容（可変）}}" tooltip-placement="bottom-left"></div>
```

###試したこと
0. container="body"属性の使用
同様の箇所にcontainer="body"属性を使用するために`tooltip-append-to-body="true"`という記述と`tooltip-container="body"`という記述を試しましたが反映されないようです。

1. position: fixed属性の使用
`.tooltip-inner`に`position: fixed`を追加したところ、tooltip本体が表示されなくなりました（arrowは出る）

2. position:absolute,z-indexマックス値の使用
`.tooltip-inner`に`position:absolute`を追加し、z-indexにマックス値（乱暴なやり方ですが）をしてみました。
状況は変わらず、gridヘッダ内にしか表示されません。（見切れ発生）

###補足情報(言語/FW/ツール等のバージョンなど)
typescript使用
angularJS使用
ui-grid内の現象
私が書いたコードではないため、何が問題なのかどの様におっていけばいいかわからない状態です。
また、tooltip自体を```uib-tooltip```という書き方をしている情報が非常に少なく、困っています。
現状の状態から新しいtooltipに変える、という考えは今のところありません。（新たなバグを埋め込みさせたくないため）
情報が乏しい中大変申し訳ございませんが、何か心当たりがある方教えていただけると非常に助かります。

【bootstrap】tooltipを最前面に表示したい

AngularJsのサービスを使用しようと考え以下のコードを書いたのですが、以下のエラーが出てしまいました。どこが違ってるかわかりますか?

エラー

`Error: [$injector:unpr] Unknown provider: YouTubeSearchServiceProvider <- YouTubeSearchService <- SearchController`

コントローラ

```lang-javascript
'use strict'

angular.module('app')
.controller('HomeController', function($scope){

})
.controller('SearchController', function($scope, YouTubeSearchService){
  $scope.$watch('searchWord', function(){
    YouTubeSearchService.search($scope.searchWord, null).then(function(data){
      $scope.response=data;
    });
  });

})
```

サービス

```lang-javascript
'use strict'

var API_KEY = "hogehoge"

angular.module('app')
.factory('YouTubeSearchService', function($http){
  var search = function(q, pageToken){
    return $http.get('https://www.googleapis.com/youtube/v3/search', {q: q, pageToken: pagetoken: maxResults: 20, type: video, videoEmbeddable: true, videoSyndicated: true, part: "id,snippet", key: AP    I_KEY})
      .than(function(response){
        return response;
      });
  };
  return {
    search: search
  };
})
```

app.js

```lang-javascript
  1 angular
  2   .module('app', [
  3     'ui.router'
  4   ])
  5   .config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
  6       $urlRouterProvider) {
  7     $stateProvider
  8       .state('home', {
  9         url: '/',
 10         templateUrl: 'views/home.html'
 11       })
 12       .state('search', {
 13         url: '/search',
 14         templateUrl: 'views/search.html',
 15         controller: 'SearchController'
 16       })
 17       .state('ranking', {
 18         url: '/ranking',
 19         templateUrl: 'views/ranking.html',
 20         controller: 'RankingController'
 21       })
 22       .state('inquery', {
 23         url: '/inquery',
 24         templateUrl: 'views/inquery.html',
 25       });
 26
 27     $urlRouterProvider.otherwise('home');
 28   }]);
```