単一のJSONファイルから複数のドロップダウンAngularJSを動的に作成する

StackOverflow https://stackoverflow.com/questions/19835897

質問

カテゴリタイプのリストがあり、各カテゴリタイプにはそれらのカテゴリのリストがあり、ユーザーが複数のアイテムから選択できるドロップダウンに表示し、選択した選択肢はビューに表示されているアプリをフィルタリングします（これはinhouseです。 AppStore）

これは、作業しているJSONファイルです。

{"type"： "category"、 "id"：1181、 "categorytype"：{"id"：1180、 "name"： "Technology"}、 "name"： "spotfire"}、{"inpy"： "category"、 "id"：1182、 "categorytype"：{"id"： "id"：1180、 "name"： "Technology"}、 "name"： "pipelinp"}、{"type"： "category"、 "id id "：1184、" categoryType "：{" id "：1183、" name "：" category "}、" name "：" ibsi "}、{" type "：" category "、" id "、" categorytype "：{" id "：1183、" name "：" category "}、" name "：" clin "}、{" type "：" category "、" id "：1187、" categorytype "：{" id " ：1186、 "name"： "capability"}、 "name"： "chemistry"}、{"type"： "category"、 "id"：1188、 "categorytype"：{"id"：1183、 "name" ： "category"}、 "name"： "Key Opinion Leaders"}、{"Type"： "category"、 "id"：1189、 "categorytype"：{"id"：1183、 "name"： "category" }、 "name"： "pnts"}、{"type"： "category"、 "id"：1190、 "categorytype"：{"id"：1183、 "name"： "category"}、 "name"： "ci"}、{"type"： "category"、 "id"：1191、 "categorytype"：{"id"：1180、 "name"： "Technology"}、 "name"： "vantagep"}、{ 「タイプ」：「カテゴリ」、「ID」：1192、 "categoryType"：{"id"：1183、 "name"： "category"}、 "name"}、{"type"： "category "、" id "：1193、" categoryType "：{" id "：1186、" name "：" capab Ility "}、" name "：" Information Science "}、{" Type "：" category "、" id "：1194、" categoryType "：{" id "：1186、" name "：" capability "}、" name "：" dmp "}、{" type "：" category "、" id "：1195、" categorytype "：{" id "：1180、" name "：" Technology "}、" name "：" spotfire web player "}、{" type "：" category "、" id "：1196、" categorytype "：{" id "：1186、" name "：" fagabability "}、" name "：" Predictives "}、{"型 "：" category "、" id "：1198、" categorytype "：{" id "：1197、" name "：" function "}、" name "：" pharmd "}、{" type "：" category " 、 "id"：1199、 "categoryType"：{"id"：1197、 "name"： "function"}、 "name"： "im -cv/gi"}、{"type"： "category"、 " id "：1200、" categoryType "：{" id "：1180、" name "：" Technology "}、" name "：" Mobile Apps "}、{" Type "：" category "、" id "：1201、 "categoryType"：{"id"：1197、 "name"： "function"}、 "name"： "rapide"}、{"type"： "category"、 "id"：1202、 "categorytype"：{" id "：1197、" name "：" function "}、" name "：" im -oncology "}、{" type "：" category "、" id "：1203、" categorytype "：{" id "：1186 、 "name"： "capability"}、 "name"： "clin"}]

ただし、管理者は任意のタイプにカテゴリタイプとカテゴリを追加できるため、ドロップダウンはハードコード化されているため、動的に作成する必要があります。各カテゴリタイプに新しいドロップダウンが必要です。

したがって、私ができることは、これを使用してカテゴリタイプごとにグループ化された1つのドロップダウンにすべてのカテゴリが表示されることでした。

<select class="form-control"  multiple class="span4 chzn-select" chosen="myCategories" data-placeholder=" "  ng-model="c"  ng-options="c.name group by c.categoryType.name for c in myCategories">

カテゴリを取得するために工場を作成しました。

.factory('categoryFactory', function ($resource) {
        return $resource(
                '/resources/appstore/categories'  
        );
    })

コントローラーはこのように見えます。

$scope.myCategories = [];

  categoryFactory.query(function (d) {
            $scope.myCategories = d;
        });

たとえば、JSONの最初の行を取ります。

「SpotFire」のカテゴリは、カテゴリタイプの「テクノロジー」にあります。

したがって、そのカテゴリタイプの場合、少なくともSpotFire +がそのカテゴリタイプにあるJSONファイルに解析されているものを示すテクノロジーのドロップダウンが必要です。

次に、次のカテゴリタイプなどの別のドロップダウン。

役に立ちましたか？

解決

各選択を個別にレンダリングする代替バージョンを次に示します。カスタムを使用しています groupBy フィルター（使用 アンダースコア):

app.filter('groupBy', ['$parse', function ($parse) {
  return function groupByFilter(input, groupByExpr) {
    return _.groupBy(input, $parse(groupByExpr));
  };
}]);

と：

<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
  <label>{{categoryTypeName}}</label>

  <select
    ng-model="selected[categoryTypeName]"
    ng-options="c as c.name for c in categories track by c.id"
    multiple
  ></select>
</div>

残念ながら、データが変更されたときにフィルターを適用する必要があります。

$scope.$watchCollection('categories', function (categories) {
  $scope.groupedCategories = groupByFilter(categories, 'categoryType.name');
});

で使用される場合 ng-repeat 直接角度はanについて不平を言います Infinite $ DIGESTループ.

デモ： http://plnkr.co/edit/ipfvfh3pbloyk1u4n3la?p=preview

一方、要件を考えると、JSONが必要な方法で既に構成されている場合、それははるかに簡単になります（子育てのリストを備えたカテゴリタイプ、逆ではありません）。

元の答え:

私はあなたの最終レイアウトを本当に想像することはできませんが、簡単な出発点は group by の機能 ng-options.

例えば：

<select
  ng-model="selected"
  ng-options="c as c.name group by c.categoryType.name for c in categories track by c.id" 
></select>

デモ： http://plnkr.co/edit/ja8dspuvqmrhmkk9yn6r?p=preview

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top