質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

1回答

2806閲覧

ng-optionsについて

DaisukeSakai

総合スコア50

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2016/04/19 01:42

angular.js1.4初心者です。
ng-optionsを使ったときの挙動についての質問です。

javascript

1 2function mainController() { 3 this.list = //$resourceで取得したオブジェクト 4} 5 6var app = angular.module('app',[]); 7app.constant('utils', { 8 ary: ['hoge1', 'hoge2', 'hoge3', 'hoge4', 'hoge5'] 9} 10app.run(['$rootScope', 'utils', ($rootScope, utils) => { 11 $rootScope.utils = utils; 12} 13app.controller('mainController', mainController);

と共通で利用する配列をcontroller,viewどちらからもいつでも参照できるように設定したうえで、

html

1<div ng-controller="mainController as main"> 2 <input type="text" ng-model="text"> 3 <select ng-model="tag" ng-options="item for item in utils.ary"> 4 <option value=""> 選択してください。 5 </select> 6 <ul> 7 <li ng-repeat="data in (main.list | filter: tag | filter: text")> data </li> 8 </ul> 9</div>

と$resourceで取得したリストをinput、selectタブで選択された値をバインドしてフィルターをしています。

ここでselectのフィルターについての質問なのですが、挙動として
①初回アクセス時のページ表示は問題なし(リストがすべて表示されている)。
②セレクトタグからある値を選択⇒問題なく動く(選択したタグによってフィルタリングできている)。
③セレクトタグを未選択状態に戻す⇒リストがすべて消える(フィルタリングで0件表示になっているよう)

この③の挙動を回避方法を教えていただきたいのです。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

原因は分からないままですが、自作filterにて対応しました。
だれか、こういう制約があるよーとか使い方が間違っているよーなどあれば教えてください。

投稿2016/04/20 00:17

DaisukeSakai

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問