0

私の例で ng-options ディレクティブが機能しない理由がわかりません:

http://plnkr.co/edit/wwAIDHl6U7YaScRzIKAY

app.coffee

app = angular.module('plunker', [])

app.controller 'MainCtrl', ($scope) ->
  $scope.query = {}
  $scope.types = ["Test", "Demo", "Numeric", "ABC"]
  $scope.items = [{typ: "Test"},{typ: "Test"},{typ: "Demo"}, {typ: "Numeric"}]

app.directive 'colFilterable', ($parse) ->
  {
    restrict: 'A',
    scope: {
      colFilterable: '=',
      filterableKey: '@',
      filterableOptions: '='
      filterableOptionsArg: '@',
    },
    compile: (el, $scope) ->
      if $scope.filterableKey
        key = $scope.filterableKey
      else
        key = el.text().toLowerCase()

      options = 'label for value in filterableOptions'
      if $scope.filterableOptionsArg
        options = $scope.filterableOptionsArg

      el.append('<select class="col-filterable" ng-model="filter" ng-options="' + options + '"><option></option></select>')

      return ($scope, el, attrs) ->
        $scope.$watch 'filter', () ->
          $scope.colFilterable[key] = $scope.filter
  }

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h2>DEMO</h2>
    <table>
      <thead>
        <tr>
          <th col-filterable="query" filterable-options="types">
          Typ
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items | filter: query">
          <td>{{item.typ}}
        </tr>
      </tbody>
    </table>

    <h2>DEBUG</h2>
    <p>{{ types }}</p>
    <p>{{ query }}</p>
  </body>

</html>

コンパイル関数で ng-options (渡すことができますが、デフォルトでは ) を使用して select を追加し、ng-model を監視して data-bindedを の値にlabel for value in filterableOptions設定するリンク関数を返します。$scope.colFilterable$scope.filter

現在要素内にあるものを保持したいので、テンプレートを使用できません。この選択を追加したいだけで、結果のテーブルをフィルタリングする必要があります

編集：

わかりました、どちらの方法でも機能せず、結果が親スコープに伝播されないように見えるので、変更イベントhttp://plnkr.co/edit/qzaf1sBoFuVD8fow0tfA$scope.$watch 'filter'を使用するように書き直しました 

el.find('select').bind 'change', (event) ->
  $scope.colFilterable[key] = this.value
  $scope.$apply()

optionこれは、要素を手動で記述した場合に機能します

4

1 に答える 1

0

わかりました、コンパイル機能の代わりにテンプレートとリンク機能を使用してそれを理解しました。これが今の私の解決策です

app.directive 'colFilterable', ($parse) ->
  {
    restrict: 'A',
    scope: {
      colFilterable: '=',
      filterableKey: '@',
      filterableOptions: '='
      filterableOptionsArg: '@',
    },
    template: (el, attr) ->
      options = 'value as value for value in filterableOptions'
      if attr.filterableOptionsArg
        options = attr.filterableOptionsArg

      return el.html() + '<select class="col-filterable" ng-model="filter" ng-options="' + options + '"><option value="">Alle</option></select>'

    link: ($scope, el, attr) ->
      if attr.filterableKey
        key = attr.filterableKey
      else
        key = el.text().toLowerCase().trim()

      el.find('select').bind 'change', (event) ->
        if $scope.filter
          $scope.colFilterable[key] = $scope.filter
        else
          delete $scope.colFilterable[key]
        $scope.$apply()
  }

http://plnkr.co/edit/50shUSLVTI0NLjqMJv4h

于 2014-09-30T14:27:55.643 に答える