过滤下拉列表中的选定项目

debugcn 发表于 Dev

坦率

我正在尝试使我的{{client.tenant}}成为以后过滤我的桌子的来源。该表格仅应基于我的下拉列表中的选择查看客户1或客户2。我感到下拉列表中的输入没有存储在任何地方。你有一些提示，我做错了什么吗？下来是我代码中的示例。我测试了很多，所以对代码感到抱歉。

    <body>
    <div class="container" ng-controller="menuController">
        <select>
  <option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>
        <div class="tab-content">
            <ul class="media-list tab-pane fade in active">
                <div class="row row-content">
                    <div class="col-xs-12">
                        <ul class="media-list">
                            <li class="media">
                                <div class="media-left media-middle">
                                </div>
                                <div class="media-body">
                                    <table>
                                        <tr>
                                            <th class="table-1">Product description</th>
                                            <th>SKU</th>
                                            <th>Tenant</th>
                                            <th>Select</th>
                                        </tr>
                                        <tr ng-repeat="product in products | searchFor:searchString">
                                            <td>{{product.description}}</td>
                                            <td>{{product.sku}}</td>
                                            <td>{{product.tenant}}</td>
                                            <td><input type="checkbox"></td>
                                        </tr>
                                    </table>
                                </div>
                            </li>
                        </ul>
            </ul>
            </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
        var app = angular.module('productBackend', []);
        app.controller('menuController', function ($scope, $http) {
            $scope.search=[];
            $http.get('./scripts/products.json')
                .then(function (res) {
                    $scope.products = res.data;
                });
        });

        app.filter('searchFor', function () {
            return function (arr, searchString) {
                if (!searchString) {
                    return arr;
                }
                var result = [];
                searchString = searchString.toLowerCase();
                angular.forEach(arr, function (item) {
                    if (item.tenant.toLowerCase().indexOf(searchString) !== -1) {
                        result.push(item);
                    }
                });
                return result;
            };
        });

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];
      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key); 
              output.push(item);
          }
      });
      return output;
   };
});

app.controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    singleSelect: null,
    multipleSelect: [],
    option1: 'option-1'
   };

   $scope.forceUnknownOption = function() {
     $scope.data.singleSelect = 'nonsense';
   };
}]);
    </script>
</body>

Json文件：

[{
    "sku": "S-MLX-SEC-002",
    "description": "Intrusion Prevention",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-MCA-007",
    "description": "Microsoft Lync Enterprise - Private Cloud",
    "tenant": "Customer 1"
},{
    "sku": "S-MLX-SEC-002",
    "description": "Intrusion Prevention",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-SEC-004",
    "description": "Local privacy compliance",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-S02-100",
    "description": "Location based Access",
    "tenant": "Customer 1"
},{
    "sku": "S-MLX-SEC-002",
    "description": "Intrusion Prevention",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-S02-510",
    "description": "Two factor authentication - Hard Token Security",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-MCA-007",
    "description": "Microsoft Lync Enterprise - Private Cloud",
    "tenant": "Customer 1"
},{
    "sku": "S-MLX-CHG-001",
    "description": "Changes level Business - for Global Desktop Bundel",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-GLD-003",
    "description": "Global Desktop Business Bundel - Performance - Private Cloud",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-GLD-012",
    "description": "Global Desktop Foundation - Standard - Private Cloud",
    "tenant": "Customer 1"
},{
    "sku": "S-MLX-OFF-001",
    "description": "Microsoft Office Standard - Private Cloud",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-LOB-824",
    "description": "Exact Financials (CL) - Private Cloud",
    "tenant": "Customer 1"
}, {
    "sku": "S-MLX-MCA-007",
    "description": "Microsoft Lync Enterprise - Private Cloud",
    "tenant": "Customer 2"
},{
    "sku": "S-MLX-SEC-002",
    "description": "Intrusion Prevention",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-SEC-004",
    "description": "Local privacy compliance",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-S02-100",
    "description": "Location based Access",
    "tenant": "Customer 2"
},{
    "sku": "S-MLX-SEC-002",
    "description": "Intrusion Prevention",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-S02-510",
    "description": "Two factor authentication - Hard Token Security",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-MCA-007",
    "description": "Microsoft Lync Enterprise - Private Cloud",
    "tenant": "Customer 2"
},{
    "sku": "S-MLX-CHG-001",
    "description": "Changes level Business - for Global Desktop Bundel",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-GLD-003",
    "description": "Global Desktop Business Bundel - Performance - Private Cloud",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-GLD-012",
    "description": "Global Desktop Foundation - Standard - Private Cloud",
    "tenant": "Customer 2"
},{
    "sku": "S-MLX-OFF-001",
    "description": "Microsoft Office Standard - Private Cloud",
    "tenant": "Customer 2"
}, {
    "sku": "S-MLX-LOB-824",
    "description": "Exact Financials (CL) - Private Cloud",
    "tenant": "Customer 2"
}]

Plunkr https://embed.plnkr.co/hfB75e6w9sYZzDkwyh24/

安息日

您只需更改以下代码

 <select>
   <option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
  </select>

至

 <select ng-model="dropdownString" >
     <option ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
  </select>

我不确定它是否会工作。这就是我解决您问题的方法。我的代码如下：

的HTML

<input type="text" class="search" ng-model="searchx.sku" placeholder="Enter your search terms" />


<select ng-model="searchx.tenant">
    <option ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>

<div class="tab-content">
    <ul class="media-list tab-pane fade in active">
        <div class="row row-content">
            <div class="col-xs-12">
               <ul class="media-list">
                        <li class="media">
                            <div class="media-left media-middle">
                            </div>
                            <div class="media-body">
                                <table>
                                    <tr>
                                        <th class="table-1">Product description</th>
                                        <th>SKU</th>
                                        <th>Tenant</th>
                                        <th>Select</th>
                                    </tr>
                                    <tr ng-repeat="product in products | filter: searchx">
                                        <td>{{product.description}}</td>
                                        <td>{{product.sku}}</td>
                                        <td>{{product.tenant}}</td>
                                        <td><input type="checkbox"></td>
                                    </tr>
                                </table>
                            </div>
                        </li>
                    </ul>
        </ul>
        </div>

Angular.js

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

 app.controller('menuController', function ($scope, $http) {

       $scope.searchx = {};   

        $scope.search=[];
        $http.get('./products.json')
            .then(function (res) {
                $scope.products = res.data;
            });  
 });


 app.filter('unique', function() {
        // same code
 });

 app.controller('ExampleController', ['$scope', function($scope) {
     // same code
 }]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。