1

html の select-field のコードは次のとおりです。

<ui-select ng-model="group.selected" theme="selectize" ng-click="searchDisabled(3)" ng-disabled="disabledGroup">
   <ui-select-match placeholder="Choose a group">
       {{$select.selected.name}}
   </ui-select-match>
   <ui-select-choices repeat="group in groups | filter: $select.search">
      <span ng-bind-html="group.name | highlight: $select.search"></span>
      <small ng-bind-html="group.code | highlight: $select.search"></small>
   </ui-select-choices>
</ui-select>

次に、テーブル リストをフィルタリングするために重要なフィールド:

<tr ng-repeat="item in filteredNames = (nameslist | filter:search | selectGroup:group.selected)">
   <td>{{ item.lname }}</td>
   <td>{{ item.fname }}</td>
   <td>{{ item.maxAge }}</td>
</tr>

カスタム フィルター selectGroup の ui-select-tag の ngModel 値をフィルターのパラメーターとして使用しています。

名前リストの値はデータベースから取得されます。QR_Group DB-Table による GET リクエストの JSON 結果は次のとおりです。

{
  "QR_Name":[
    { "Id":31, "lname":"Bricks", "fname":"Johnny", "maxAge":24, "QR_GroupId":6 },
    { "Id":4, "lname":"Schon", "fname":"Toni", "maxAge":54, "QR_GroupId":6 },
    { "Id":56, "lname":"Houston", "fname":"Monica", "maxAge":29, "QR_GroupId":6 },
   ],
  "Id":6,
  "name":"South America",
  "code":"SA"
}

この JSON 形式は、WebAPI メソッド GetGroup から取得しています。カスタム フィルターを使用してテーブル リストに QR_Name 配列を表示するにはどうすればよいですか?

これが私の最初の考えでした：

testApp.filter('selectGroup', ['$log', function ($log) {
    return function (nameslist, group) {
        group = group || '';
        $log.info('fondslist:', fondslist);
        $log.info('Filter for group:', group);
        var selectList = [];

        angular.forEach(fondslist, function (input) {
            if (group == input.QR_Name['QR_GroupId']) {
                selectList.push(input);
            }
        });
    }
}]);

しかし、フィルターは正しく機能しません。

4

1 に答える 1

0

angular ui-select は、group-filter 属性を使用して 0.12 でカスタム フィルターのサポートを追加しました - https://github.com/angular-ui/ui-select/pull/836

于 2016-01-31T16:51:52.460 に答える