个人中心
gpt4 book ai didi

javascript - Angular 中唯一的过滤选择列表仅返回数据集中的单个项目

转载 作者：行者123 更新时间：2023-12-02 15:31:16 26 4
gpt4 key购买 nike

我有一个数据集，我正在尝试使用 Angular 中的选择列表来过滤该数据集。选择列表中填充了数据中的条目，我正在使用 Angular 过滤器对其进行过滤，以仅提供“唯一”。

问题是，因为选择列表是按唯一值过滤的，所以如果我使用选择列表来过滤数据集，它只会返回一项，而不是返回所有符合该条件的项目。

我也不确定如何让过滤器列表协同工作，以便每个列表都会进一步缩减数据集。

最后，我不确定当选择列表项设置回默认值时如何重置数据。

http://plnkr.co/edit/5s1BN7?p=preview 

var app = angular.module('plunker', ['angular.filter']);

app.controller('MainCtrl', function($scope, $anchorScroll, $location) {

  $scope.cart = [];

  $scope.addToCart = function(index) {
    $scope.cart.push(index);

    $scope.cartCount = $scope.cart.length;
  }



  $scope.activeRow = function(index) {
    $scope.selectedRow = index;

    $location.hash();
    $anchorScroll('anchor-' + index);

  }



  $scope.gotoAnchor = function(x) {
    var newHash = 'anchor' + x;


  }

  $scope.dataObject = [{
      "Number": "001",
      "Status": "NCB",
      "Compound": "CD19A"
    }, {
      "Number": "002",
      "Status": "NCA",
      "Compound": "CD19B"
    }, {
      "Number": "003",
      "Status": "NCA",
      "Compound": "CD33C"
    }, {
      "Number": "001",
      "Status": "NCA",
      "Compound": "CD33D"
    }, {
      "Number": "002",
      "Status": "NCB",
      "Compound": "CD33E"
    }, {
      "Number": "003",
      "Status": "NCB",
      "Compound": "CD20F"
    }, {
      "Number": "001",
      "Status": "NCB",
      "Compound": "CD20G"
    }, {
      "Number": "002",
      "Status": "NCC",
      "Compound": "CD20H"
    }, {
      "Number": "003",
      "Status": "NCC",
      "Compound": "CD33I"
    }, {
      "Number": "001",
      "Status": "NCC",
      "Compound": "CD33J"
    }

  ];


});
/* Put your css in here */

body {
  background: #eee;
}
div.cart {
  display: block;
  height: 70px;
  background: silver;
  margin-left: 20px;
  width: 200px;
  padding: 5px 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.cart h1 {
  color: #fff;
  line-height: 20px;
}
.item-list-wrapper {
  height: 300px;
  width: 740px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  margin-left: 20px;
}
.item-list {
  height: 70px;
  width: 100%;
  margin-bottom: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  background: #efefe4;
}
li {
  display: inline-block;
  list-style: none;
  padding: 0 40px 40px 40px;
  font-size: 24px;
}
.open {
  height: 300px;
  background: #fff;
}
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
  <script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
  <script src="angular-filter.min.js"></script>
  <script src="app.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>


</head>

<body ng-controller="MainCtrl">
  <div ng-view=""></div>

  <div>
    <h2>Filter results</h2>

    <select name="some_name" id="some_name" onchange="" class="form-control" ng-model="selectNumber" ng-options="data.Number for data in dataObject | unique: 'Number' ">
      <option value="">Select Number</option>
    </select>
    <select name="some_name" id="some_name" onchange="" class="form-control" ng-model="selectStatus" ng-options="data.Status for data in dataObject | unique: 'Status' ">
      <option value="">Select Status</option>
    </select>
    <select name="some_name" id="some_name" onchange="" class="form-control" ng-model="selectCompound" ng-options="data.Compound for data in dataObject | unique: 'Compound' ">
      <option value="">Select Compound</option>
    </select>


  </div>



  <div class="cart">
    <h1>Cart: {{cartCount}}</h1>
  </div>


  <div class="item-list-wrapper">
    <div class="item-list" ng-repeat="data in dataObject | filter: selectNumber | filter: selectStatus | filter: selectCompound" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
      <a id="anchor-{{$index}}"></a>
      <ul>
        <li>{{data.Number}}</li>
        <li>{{data.Status}}</li>
        <li>{{data.Compound}}</li>
        <li>
          <a href="" ng-click="addToCart()">Add to Cart</a>
        </li>
      </ul>
    </div>
  </div>
  <!--item-list-wrapper -->


</body>

</html>

最佳答案

在模型中，选择属性值而不是完整对象:

ng-options="data.Number as data.Number for data in dataObject | unique: 'Number' "

此外，当您使用 Angular 过滤器时，请将filter替换为filterBy:

filterBy: ['Number']: selectNumber

这种替换的原因是它可以正确处理将所选值重置为空字符串的情况。

参见updated plunkr

关于javascript - Angular 中唯一的过滤选择列表仅返回数据集中的单个项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33290091/

26 4 0
文章推荐： javascript - 一旦套接字发出事件(？)，每 5 秒更新一次组件
文章推荐： javascript - Spotify json 响应包含换行符？
文章推荐： javascript - html 文本框转换的简单 Javascript。两次都不起作用
文章推荐： javascript - jQuery window.location.hash 问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com