1
我试图让我的{{client.tenant}}成为过滤掉我的表格的源。该表格只应根据我的下拉列表中的选择来查看客户1或客户2。我感觉我的下拉列表中的输入不存储在任何地方。你有什么秘诀,我做错了什么? down是我的代码中的一个示例。我测试了很多周围很抱歉的代码:)对下拉列表中选定项目的过滤器
<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/
你能在plunker或者一些编辑器插件吗?所以这将很容易调试? – Indhu
当然,让我检查它是如何工作的:)我会尽快回复 – Frank
https://embed.plnkr.co/hfB75e6w9sYZzDkwyh24/这足够吗?不知道你是否可以像这样编辑? – Frank