0

我无法弄清楚为什么 ng-options 指令在我的示例中不起作用：

http://plnkr.co/edit/wwAIDHl6U7YaScRzIKAY

应用程序.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
  }

索引.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 的选择（可以传入，但默认为label for value in filterableOptions），并返回一个链接函数，该函数监视 ng-model 并将数据绑定设置$scope.colFilterable为$scope.filter

我不能使用模板，因为我想保留元素中当前的内容，并且只想附加这个选择，作为回报应该过滤结果表

编辑：

好吧，似乎这$scope.$watch 'filter'两种方式都不起作用，结果也不会传播到父范围，所以我重写了它以使用更改事件 http://plnkr.co/edit/qzaf1sBoFuVD8fow0tfA

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 回答