AngularJS：按

Question

我想过滤$scope.drinks数组的显示元素。产品是一个对象数组，包含几个具有自己类型的元素：food或drink。我只想在用户点击选择选项food或drink时过滤数组。

我很接近自己做，但经历了很多错误。我正在寻找最有效的方法。

感谢您的帮助！

这是整个应用程序的jsfiddle：https://jsfiddle.net/scgsc7or/25/

修改：我已经尝试过使用ng-model="filterCategory"和filter : filterCategory的解决方案，但发生了一些非常奇怪的事情。即使数组被过滤，如果我点击某个元素，它会添加其他位置！看看gif：

新jsfiddle：https://jsfiddle.net/scgsc7or/27/

Answer 1

您需要添加ng-model =＆＃34; filterCategory＆＃34;在选择上然后使用过滤器：ng-repeat中的filterCategory

 <div class="col-xs-6">
  <select class="chooseCategory" ng-model="filterCategory">
    <option value="" disabled selected>- choose category -</option>
    <option value="drink">drink</option>
    <option value="food">food</option>
    <option value="">all positions</option>
  </select>
  <div class="itemListDiv">
    <ul class="list-group itemList">
      <li class="list-group-item" ng-hide="product.isHidden" ng-repeat="(id, product) in drinks | filter : filterCategory" ng-click="addToShoppingList(product)">
        <strong>{{ product.name }}</strong> - {{ product.price | currency }}
      </li>
    </ul>
  </div>
</div>

好吧我改变了传递给函数addToShoppingList然后在js：

中传递的值

$scope.addToShoppingList = function(product) {
    var index = $scope.drinks.indexOf(product);
    var itemToAdd = $scope.drinks[index];
    itemToAdd.quantity = 1;
    $scope.itemsToBuy.push(itemToAdd);
    $scope.drinks.splice(index, 1);
   };