Question

我正在使用嵌套的组件结构，但我无法使用默认的“全部”选项来处理ng-option生成的选择列表。我在这个页面的底部添加了一个plunker。如果我检查生成列表的范围，我会看到“全部”返回null而不是空字符串。 Plunker在下面添加。

var app = angular.module('plunker', []);

app.component('keyfeed', {
  bindings: { 
    search: '='
  },
  template: `
    <ul>
    <li ng-repeat="record in records | filter:$ctrl.search">{{ record.name }}</li>
    </ul>
  `,
  controller: function($scope) {
    
    $scope.records = [
      {
        "name": "Alfreds SFutterkiste",
        "id": "1",
        "tag": "tag1"
      },
      {
        "name": "Berglunds snabbköp",
        "id": "2",
        "tag": "tag1"
      },
      {
        "name": "Centro comercial Moctezuma",
        "id": "3",
        "tag": "tag2"
      },
      {
        "name": "Ernst Handel",
        "id": "4",
        "tag": "tag2"
      }
    ];
  }
});

app.component('search', {
  bindings: { 
    search: '='
  },
  template: `
    <select ng-model="$ctrl.search" ng-options="tag.name as tag.name for tag in $ctrl.tags">
    <option value="">All</option>
    </select>
  `,
  controller: function($scope) {

    this.tags = [
      {
        "tid": "1",
        "name": "tag1"
      },
      {
        "tid": "2",
        "name": "tag2"
      }
    ];
  }

});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.6.x" src="https://code.angularjs.org/1.6.4/angular.js" data-semver="1.6.4"></script>
    <script src="script.js"></script>
</head>

  <body>
    <search search="search"></search>
    <keyfeed search="search"></keyfeed>
  </body>

</html>

正如您在下面的plunker中看到的那样，按标签过滤是有效的。不幸的是，在您选择了代码并重新选择All后，该列表将变为空。

Plunker

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

Answer 1

试试这个：

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

你会注意到两件事： 1）select中的代码需要变为ng-options="tag.tid as tag.name for tag in tags"（不$ctrl.tags，因为tags数组已绑定到组件$scope）。

2）使用tid = ''在“下拉列表”中添加“全部”选项。使用与filter:{ tag: $ctrl.search }结合的空字符串将匹配所有内容。在记录的另一个属性中具有tid的不太可能的情况下，告诉过滤器仅匹配记录标记是很好的。

默认的“全部”选项不适用于ng-option选择列表

Plunker

1 个答案: