1

そこで、ドロップダウン リストのレンダリングを簡素化するために angularjs ディレクティブを作成しました。

'use strict';

angular.module('myApp')
  .directive('filterDropdowns', function () {
    return {
      restrict: 'A',
      template: '<a class="wrapper-dropdown" data-dropdown="{{ labelData }}">{{ label }}</a>' +
                '<ul id="{{ labelData }}" class="f-dropdown">' + 
                  '<li ng-repeat="item in items">' + 
                    '<a ng-click="setFilter(item.district)">{{ item.district }}</a>' +
                  '</li>' +
                '</ul>',
      scope: {
        label: '@label',
        labelData: '@labelData',
        dropdownValue: '=' // expects an object from the directive
      },
      link: function (scope, element, attrs) {
        scope.$watch('dropdownValue', function(dropdownValue) {
          if (dropdownValue) {
            scope.items = dropdownValue;
          }
        });
      }
    };
  });

この方法で私のビューで簡単に使用できます:-

<div filter-dropdowns label="Districts" label-data="districts-data" dropdown-value="districts"></div>

<div filter-dropdowns label="Countries" label-data="countries-data" dropdown-value="countries"></div>

問題は{{ item.district }}、私のディレクティブでの使用にあります。

ディレクティブに渡すオブジェクト リストによっては、実際にレンダリングする必要があるため{{ item.country }}、{{ item.area }}ディレクティブのテンプレートにハードコーディング したり、.{{ item.district }}item.districtsetFilter()

この問題を解決{{ item.district }}して、ディレクティブ コードにハードコーディングしたりitem.district、setFilter().

4

2 に答える 2

0

{{ item.district }}より一般的なものにすること{{ item.name }}ができ、データソースを地区から名前に変換してから、ディレクティブを渡すことができます。このコードを見てください。

Demo on Fiddle

function Cntl($scope) {
    var districts = [{
        district: "PA"
    }, {
        district: "NJ"
    }, {
        district: "MD"
    }];

    $scope.districts = [];
    angular.forEach(districts, function (item) {
        $scope.districts.push({
            name: item.district
        });
    });

    var countries = [{
        district: "USA"
    }, {
        district: "Mexico"
    }];
    $scope.countries = [];
    angular.forEach(countries, function (item) {
        $scope.countries.push({
            name: item.district
        });
    });
}

angular.module('MyApp', []).directive('filterDropdowns', function () {
    return {
        restrict: 'A',
        template: '<a class="wrapper-dropdown" data-dropdown="{{ labelData }}">{{ label }}</a>' +
            '<ul id="{{ labelData }}" class="f-dropdown">' +
            '<li ng-repeat="item in items">' +
            '<a ng-click="setFilter(item.name)">{{ item.name }}</a>' +
            '</li>' +
            '</ul>',
        scope: {
            label: '@label',
            labelData: '@labelData',
            dropdownValue: '=' // expects an object from the directive
        },
        link: function (scope, element, attrs) {
            scope.$watch('dropdownValue', function (dropdownValue) {
                if (dropdownValue) {
                    scope.items = dropdownValue;
                }
            });
        }
    };
});
于 2013-07-30T04:30:24.283 に答える