javascript - Angular UI Bootstrap Typeahead 不适用于过滤器和 orderBy

Question

当项目详细信息来自另一个 JSON 对象时，是否有任何选项可以使用预先输入搜索项目名称？

演示:http://codepen.io/anon/pen/PGWvmE

其他过滤器和 orderBy 工作正常，但我找不到使用 orderBy 和基于列表中所选项目的过滤器从 typeahead 进行项目搜索的解决方案

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  $scope.changeNum = function(itemNum) {
    $scope.numPerPage = itemNum;
  };

  $scope.numsForPage = [5, 10, 25, 50, 100];
  $scope.currentPage = 1;
  $scope.numPerPage = 5;
  $scope.maxSize = 5;

  // Sort
  $scope.changeSort = function(item) {
    $scope.reverse = $scope.reverse = !$scope.reverse;
    $scope.sort = item;
  };

  
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 5;
  $scope.maxSize = 5;
  $scope.expenses = [
    {
      "id": 1,
      "name": "Warren Phillips",
      "amount": "37.47",
      "date": "12/11/2015",
      "item_id": 1,
      "model_id": 1,
      "description": "blandit. Nam nulla magna, malesuada vel, convallis in, cursus et, eros. Proin ultrices. Duis volutpat nunc sit amet metus. Aliquam erat volutpat. Nulla facilisis. Suspendisse commodo tincidunt nibh. Phasellus nulla. Integer vulputate, risus a ultricies adipiscing, enim mi tempor lorem, eget mollis lectus pede et risus. Quisque libero lacus, varius et, euismod et, commodo at, libero. Morbi accumsan"
    }, {
      "id": 2,
      "name": "Declan Ayala",
      "amount": "29.18",
      "date": "12/17/2014",
      "item_id": 3,
      "model_id": 8,
      "description": "Integer eu lacus. Quisque imperdiet, erat nonummy ultricies ornare, elit elit fermentum risus, at fringilla purus mauris a nunc. In at pede. Cras"
    }, {
      "id": 3,
      "name": "Ivana Bell",
      "amount": "88.53",
      "date": "11/20/2014",
      "item_id": 3,
      "model_id": 6,
      "description": "Etiam imperdiet dictum magna. Ut tincidunt orci quis lectus. Nullam suscipit, est ac facilisis facilisis, magna tellus faucibus leo, in lobortis tellus justo sit amet nulla."
    }, {
      "id": 4,
      "name": "Brennan Noel",
      "amount": "17.76",
      "date": "02/06/2015",
      "item_id": 6,
      "model_id": 22,
      "description": "velit eu sem. Pellentesque ut ipsum ac mi eleifend egestas. Sed pharetra, felis"
    }, {
      "id": 5,
      "name": "Thomas Tran",
      "amount": "29.59",
      "date": "08/20/2014",
      "item_id": 3,
      "model_id": 7,
      "description": "nisl sem, consequat nec, mollis vitae, posuere at, velit. Cras lorem lorem, luctus ut, pellentesque eget, dictum placerat, augue. Sed molestie. Sed id risus quis diam luctus lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris ut quam vel sapien imperdiet ornare."
    }, {
      "id": 6,
      "name": "Tucker Bolton",
      "amount": "66.69",
      "date": "12/09/2014",
      "item_id": 4,
      "model_id": 14,
      "description": "et risus. Quisque libero lacus, varius et, euismod et, commodo at, libero. Morbi accumsan laoreet ipsum. Curabitur consequat, lectus sit amet luctus vulputate, nisi sem semper erat, in consectetuer ipsum nunc id enim. Curabitur massa. Vestibulum accumsan neque et nunc. Quisque ornare tortor at risus. Nunc ac sem ut dolor dapibus gravida. Aliquam tincidunt, nunc ac mattis ornare, lectus ante dictum mi, ac mattis velit justo nec ante. Maecenas mi felis, adipiscing fringilla, porttitor vulputate, posuere vulputate, lacus. Cras interdum."
    }, {
      "id": 7,
      "name": "Medge Mullen",
      "amount": "23.78",
      "date": "10/17/2015",
      "item_id": 4,
      "model_id": 12,
      "description": "dictum mi, ac mattis velit justo nec ante. Maecenas mi felis, adipiscing fringilla, porttitor vulputate, posuere vulputate, lacus. Cras interdum. Nunc sollicitudin commodo ipsum. Suspendisse non leo. Vivamus nibh dolor, nonummy ac, feugiat non, lobortis quis, pede. Suspendisse dui. Fusce diam nunc, ullamcorper eu, euismod ac, fermentum vel, mauris. Integer sem elit, pharetra ut, pharetra sed, hendrerit a, arcu. Sed et"
    }, {
      "id": 8,
      "name": "Morgan Merritt",
      "amount": "54.09",
      "date": "04/10/2016",
      "item_id": 2,
      "model_id": 4,
      "description": "Nulla facilisis. Suspendisse commodo tincidunt nibh. Phasellus nulla. Integer vulputate, risus a ultricies adipiscing, enim mi tempor lorem, eget mollis lectus pede et risus. Quisque libero lacus, varius et, euismod et,"
    }, {
      "id": 9,
      "name": "Janna Casey",
      "amount": "22.61",
      "date": "08/05/2015",
      "item_id": 1,
      "model_id": 1,
      "description": "eros turpis non enim. Mauris quis turpis vitae purus gravida sagittis. Duis gravida. Praesent eu nulla at sem molestie sodales. Mauris blandit enim consequat purus. Maecenas libero est, congue a, aliquet vel, vulputate eu, odio. Phasellus at augue id ante dictum"
    }, {
      "id": 10,
      "name": "Buffy Best",
      "amount": "59.98",
      "date": "05/06/2015",
      "item_id": 5,
      "model_id": 15,
      "description": "lacus vestibulum lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamcorper, velit in aliquet lobortis, nisi nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium neque. Morbi quis urna."
    }, {
      "id": 11,
      "name": "Brielle Newman",
      "amount": "52.26",
      "date": "04/16/2016",
      "item_id": 4,
      "model_id": 18,
      "description": "placerat, augue. Sed molestie. Sed id risus quis diam luctus lobortis."
    }, {
      "id": 12,
      "name": "Julie James",
      "amount": "6.38",
      "date": "08/15/2014",
      "item_id": 3,
      "model_id": 6,
      "description": "placerat, orci lacus vestibulum lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque"
    }, {
      "id": 13,
      "name": "Shaine Barnett",
      "amount": "0.04",
      "date": "09/29/2014",
      "item_id": 5,
      "model_id": 20,
      "description": "laoreet, libero et tristique pellentesque, tellus sem mollis dui, in sodales elit erat vitae risus. Duis a mi fringilla mi lacinia mattis. Integer eu lacus. Quisque imperdiet, erat nonummy ultricies ornare, elit elit fermentum risus, at fringilla purus mauris a nunc. In at pede. Cras vulputate velit eu sem. Pellentesque ut ipsum ac mi eleifend egestas. Sed"
    }, {
      "id": 14,
      "name": "Genevieve Underwood",
      "amount": "50.71",
      "date": "09/24/2015",
      "item_id": 6,
      "model_id": 22,
      "description": "consequat auctor, nunc nulla vulputate dui, nec tempus mauris erat eget ipsum. Suspendisse sagittis. Nullam vitae diam. Proin dolor. Nulla semper"
    }, {
      "id": 15,
      "name": "Adam Villarreal",
      "amount": "18.48",
      "date": "04/06/2016",
      "item_id": 2,
      "model_id": 5,
      "description": "nisl. Maecenas malesuada fringilla est. Mauris eu turpis. Nulla aliquet. Proin velit. Sed malesuada augue ut lacus. Nulla tincidunt, neque vitae semper egestas, urna justo faucibus lectus, a sollicitudin orci sem eget massa. Suspendisse eleifend. Cras sed leo. Cras vehicula aliquet libero. Integer in magna. Phasellus dolor elit, pellentesque a, facilisis non, bibendum sed, est. Nunc laoreet lectus quis massa. Mauris"
    }
  ];
  $scope.theItems = {
    1: {'name': 'TV', 'models': [1] },
    2: {'name': 'Radio', 'models': [2,3,4,5] },
    3: {'name': 'Mobile', 'models': [6,7,8,9,10,11] },
    4: {'name': 'Tablet', 'models': [12,13,14,15,16] },
    5: {'name': 'Camera', 'models': [17,18,19,20,21] },
    6: {'name': 'Speaker', 'models': [22,23,24] }
  }
  $scope.theModels = {
    1: {'name': 'Toshiba', 'make': 1},
    2: {'name': 'Samsung', 'make': 2},
    3: {'name': 'Sony', 'make': 2},
    4: {'name': 'Panasonic', 'make': 2},
    5: {'name': 'Akai', 'make': 2},
    6: {'name': 'iPhone', 'make': 3},
    7: {'name': 'Lumia', 'make': 3},
    8: {'name': 'Galaxy', 'make': 3},
    9: {'name': 'Note II', 'make': 3},
    10: {'name': 'Note IV', 'make': 3},
    11: {'name': '159 Sportwagon', 'make': 3},
    12: {'name': 'Pixel C', 'make': 4},
    13: {'name': 'Surface Pro', 'make': 4},
    14: {'name': 'iPad Air', 'make': 4},
    15: {'name': 'Xperia', 'make': 4},
    16: {'name': 'Galaxy S2', 'make': 4},
    17: {'name': 'Sony A7R II', 'make': 5},
    18: {'name': 'Nikon D500', 'make': 5},
    19: {'name': 'Fuji X-T10', 'make': 5},
    20: {'name': 'RX100 III', 'make': 5},
    21: {'name': 'Boom 2', 'make': 5},
    22: {'name': 'Fugoo', 'make': 6},
    23: {'name': 'JBL Charge', 'make': 6},
    24: {'name': 'JBL Xtreme', 'make': 6},
  }
  $scope.theItemsArray = $.map($scope.theItems, function(val, index) {
    val.key = index;
    return [val];
  });
  $scope.theModelArray = $.map($scope.theModels, function(val, index) {
    val.key = index;
    return [val];
  });
}).filter('pagination', function() {
	  return function(input, currentPage, pageSize) {
	    if(angular.isArray(input)) {
	      var start = (currentPage-1)*pageSize;
	      var end = currentPage*pageSize;
	      return input.slice(start, end);
	    }
	  };
	});

.box {
  border: 1px solid #DDD;
  padding: 10px;
  position: relative;
  background: #FFF;
  margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
  border-top: none;
}
.tab-content > .box {
  border-top: none;
}
select.pagiantion {
  width: auto;
  display: inline-block;
}
.box {
  th {
    cursor: pointer;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
  <div class="container">
    <hr />
    <uib-tabset>
      <uib-tab>
        <uib-tab-heading>Statement</uib-tab-heading>
        <div class="box">
          <h1>Todos</h1>
          <h4>{{expenses.length}} total</h4>
          <div class="row">
            <div class="col-md-6">
              <label for="">Show 
            <select class="form-control pagiantion" ng-model="numPerPage" ng-options="numPage for numPage in numsForPage" ng-change="changeNum(numPerPage);"></select>
            entries
          </label>
            </div>
          </div>
          <table class="table table-hover table-responsive table-bordered">
            <thead>
              <tr>
                <th ng-click="changeSort('name')">Name <span class="glyphicon pull-right" ng-class="sort == 'name' ? (reverse ? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes') : 'glyphicon-sort' "></span></th>
                <th ng-click="changeSort('amount')">Amount <span class="glyphicon pull-right" ng-class="sort == 'amount' ? (reverse ? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes') : 'glyphicon-sort' "></span></th>
                <th ng-click="changeSort('date')">Date <span class="glyphicon pull-right" ng-class="sort == 'date' ? (reverse ? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes') : 'glyphicon-sort' "></span></th>
                <th ng-click="changeSort('item')">Item <span class="glyphicon pull-right" ng-class="sort == 'date' ? (reverse ? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes') : 'glyphicon-sort' "></span></th>
                <th ng-click="changeSort('item')">Model <span class="glyphicon pull-right" ng-class="sort == 'date' ? (reverse ? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes') : 'glyphicon-sort' "></span></th>
              </tr>
              <tr>
                <th>
                  <input 
                         type="text" 
                         class="form-control" 
                         placeholder="Name" 
                         ng-model="filterlist.name"/>
                </th>
                <th>
                  <input 
                         type="text" 
                         class="form-control" 
                         placeholder="Amount" 
                         ng-model="filterlist.amount"/>
                </th>
                <th>
                  <input 
                         type="text" 
                         class="form-control" 
                         placeholder="Date" 
                         ng-model="filterlist.date"/>
                </th>
                <th>
                  <input 
                         type="text"
                         class="form-control" 
                         ng-model="filterlist.item" 
                         uib-typeahead="item as item.name for item in theItemsArray | filter:{name:$viewValue} | limitTo:8"
                         >
                </th>
                <th>
                  <input 
                         type="text"
                         class="form-control" 
                         ng-model="filterlist.model" 
                         uib-typeahead="model as model.name for model in theModelArray | filter:{name:$viewValue} | limitTo:8"
                         >
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="expense in filteredlist = (expenses | filter:filterlist) | orderBy:sort:reverse | pagination: currentPage : numPerPage">
                <td>{{expense.name}}</td>
                <td>{{expense.amount}}</td>
                <td>{{expense.date}}</td>
                <td>{{theItems[expense.item_id].name}}</td>
                <td>{{theModels[expense.model_id].name}}</td>
              </tr>
            </tbody>
          </table>
          <div class="clearfix" ng-show="expenses.length > numPerPage">
            <ul uib-pagination
                class="pagination-sm pull-right" 
                ng-model="currentPage" 
                max-size="maxSize" 
                total-items="filteredlist.length" 
                ng-hide="filteredlist.length < numPerPage" 
                ng-change="pageChanged()"
                max-size="5"
                items-per-page="numPerPage" 
                boundary-links="true"
                previous-text="&lsaquo;"
                next-text="&rsaquo;"
                first-text="&laquo;"
                last-text="&raquo;"
            ></ul>
          </div>
        </div>
      </uib-tab>
    </uib-tabset>
  </div>
</div>

Answer 1

类似的思路:先修改数据:

function preprocess(expenses) {
  for (var i = 0; i < expenses.length; i++) {
    var expense = expenses[i];
    expense.item = $scope.theItems[expense.item_id].name;
    expense.model = $scope.theModels[expense.model_id].name;
    expenses[i] = expense;
  }
  return expenses;
}

$scope.expenses = preprocess($scope.expenses);

  $scope.theItemsArray = $.map($scope.theItems, function(val, index) {
    return [val.name];
  });

  $scope.theModelArray = $.map($scope.theModels, function(val, index) {
    return [val.name];
  });

然后修改html:

uib-typeahead="item for item in theItemsArray | filter:$viewValue | limitTo:8"

uib-typeahead="model for model in theModelArray  | filter:$viewValue | limitTo:8"


<th ng-click="changeSort('model')">Model

<td>{{expense.item}}</td>
<td>{{expense.model}}</td>