UI-Selectは配列にバインドされません（表示されません！）AngularJS

UI-SELECTのデータ配列がありますが、ビューには表示されません。私はこの言語を初めて使っています。私はjsファイルをうまく読み込んだと思ったが、そうは思わなかった。 [コントローラからのデータ]UI-Selectは配列にバインドされません（表示されません！）AngularJS

[HTMLにおけるヘッド部]

<head> 
    <meta charset="UTF-8"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
    <script src="app.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script> 
</head>

[UI-SELECTパート]

<ui-select ng-model="project_type.selected" theme="bootstrap"> 
    <ui-select-match>{{$select.selected.project_type_item}}</ui-select-match> 
    <ui-select-choices repeat="item in project_types | filter: $select.search"> 
    <div ng-bind-html="item.project_type_item | highlight: $select.search"></div> 
    <small ng-bind-html="item.project_type_item_sub | highlight: $select.search"></small> 
    </ui-select-choices> 
</ui-select>

$scope.project_type = {}; 
$scope.project_types = [ 
    { project_type_item: 'type1', project_type_item_sub: 'sub explanation 1' }, 
    { project_type_item: 'type2', project_type_item_sub: 'sub explanation 2' }, 
];

[JSONファイル]

[{ 
"project_id": "1", 
"project_title": "Demo 1", 
"project_type" : "Type 1" 
}, { 
"project_id": "2", 
"project_title": "Demo 2", 
"project_type" : "Type 2" 
}]

私のような他の初心者がさまようれるように、親切にUI-SELECT以下Plunker中で間違っているものを私に助言してください：

http://plnkr.co/edit/kB5nsDwMU28X4LIbCL1G?p=preview

ので、合計するには、私がしようとしています：
1）UI-SELECTが機能していることを確認します。
2）コントローラからデータをロードします（名前はBooksCtrlです）
3）JSONファイルのデータでUI-SELECTフィールドが選択されています。

問題をお手伝いしてくれる人はいらっしゃいますか？

ありがとうございました！手首に

出典

2017-10-28 James D.

SMALL SLAP：

まず、あなたがこのような質問をするべきではない、ちょうどすべてのコードを表示し、あなたがこの問題を解決することができると言いますか？各ステップは、別アプリとして動作しているか、何を行うべきことのステップチェックで最初に行くステップである - それ自身のplunkerに各を再現：

1.stepを - あなたのUI-ルータが

最小限の例で正しく動作することを確認してください

2.step - あなたのUIの選択は、最小限の例で

3.stepに動作することを確認してください - あなたは、上記の手順が機能していることを確認していた後、あなたのサービスが適切なデータに

に戻ってきていることを確認します - のための質問をしますそれぞれ別々に - それから一緒に物事を統合し、あなた自身でそれをやろうとすると失敗したら質問するしている。私たちは助けます。

ANSWER：

私はあなたのコード内で複数の問題を持って見ることができるので、私はあなたのコード内のいくつかの問題を示し、残りの部分を修正するためにあなたを残します。

まず、スクリプトがアプリの正しい順序でロードされていることを確認します。他のすべてのベンダーのライブラリがそこにロードされた後jsが最後に次のようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script> 
    <script src="app.js"></script>

また、UI選択、正しくお仕事をするために心に留めておくCSSスタイルをインポートする必要があります、それは本当に醜いそう<head>タグに入れて： - ：あなたが次に

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css" media="all" rel="stylesheet" />

そして、ブートストラップCSSを追加するだけでなく、実際に入力フィールドを参照することが有用であるあなたには、いくつかのスタイルを必要とします

var app = angular.module('demo', ['ui.router','ui.select']);

次に、あなたのUI-ルータあなたは$ qProviderを注入し、falseにerrorOnUnhandledRejectionsを設定することにより、同様にそれらの問題を修正する場合がありますので、未処理の拒否不満です：

のアプリのUI選択の依存関係を持っていません

app.config(['$stateProvider', '$urlRouterProvider', '$qProvider', 
    function($stateProvider, $urlRouterProvider, $qProvider) { 
    $qProvider.errorOnUnhandledRejections(false); 
    //...your code 
    }

UI-選択するには、すべてのBooksDetailCtrl $の範囲にプロジェクトだけでなく、選択されています1（すでにカバーされていることがあります）公開する必要が使用できるようにするには：

ProjectService.getProjects().then(res=>{ 
    $scope.allProjects = res; 
    });

を

LAST PART

私は推測を行うと、あなたはそのui-selectを使用して状態の間で切り替えたいと言うだろう。あなたがあなたの上にこのすべてを持っていた後、したがって、このようになり、あなたのUI選択のHTMLを変更する必要があります（ui-select-matchは、プロジェクトのタイトルとアイテムと一致しますitemオブジェクトが選択されます - allProjectsからプロジェクト）：あなたの場合は

<ui-select on-select="onSelected($item)" ng-model="project_data" theme="bootstrap"> 
     <ui-select-match> 
     <span ng-bind="$select.selected.project_title"></span> 
     </ui-select-match> 
     <ui-select-choices repeat="item in (allProjects | filter: $select.search) track by item.project_id"> 
      <span ng-bind="item.project_title"></span> 
     </ui-select-choices> 
    </ui-select>

を

$scope.onSelected = (selectedProject) => { 
    $state.go('books.detail', {project_id: selectedProject.project_id}); 
    }

機能onSelectedこの状態のスイッチを行いますし、適切な状態のDEPEに切り替わります：私はあなたが以前に追加されたすべてのプロジェクトが$の範囲にonSelected関数を作成する必要があり、それにあなたのモデルを設定しますon-select="onSelected($item)"を追加参照ui-selectで選択した項目を検索します。

は、ここでは、この作業のすべてとplunkerです：

http://plnkr.co/edit/25PZ1wgCAHtG5M51ItZf?p=preview

私はこれが便利であると思いますがないことから、あなたは運に私はこの（あなたがplunkerに入れていいもの）を見て自由な時間を過ごしています実際にこの質問には注意を払いますが、広すぎます。次回に別の質問に質問を投稿し、手順を実行してすべてを個別に質問すると、すぐに質問が解決されます。

乾杯、

出典

2017-10-28 13:23:39 pegla

うわー！ありがとう@ペグラ！私はあなたのサポートに本当に感謝しています！私はここで質問する方法に関するあなたのコメントに留意します。あなたの詳細な説明をありがとう！あなたが言いましたように私は幸運だったと思います。私は今それに取り組んでいきます。他の人もこの記事から学ぶことを願っています:) –

問題はありません。 – pegla

UI-Selectは配列にバインドされません（表示されません！）AngularJS

答えて

関連する問題