Question

我从AngularJS开始，我有一个类型和价格的产品清单

$scope.produits = [{"ID":77,"title":"frite","prix":"5","type":"aliment"},{"ID":88,"title":"marteau","prix":"7","type":"outil"},{"ID":88,"title":"masse","prix":"10","type":"outil"}];

我设法使用输入文本进行搜索，以过滤标题，价格和类型的结果。然后，我设置了一个nouislider，我希望它只显示最小和最大价格之间的产品，同时保持用我的输入搜索的能力。

是否有人可以帮助我。

谢谢：）

（你可以找到我的代码并进行测试）

<!-- slider -->
var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [5, 20],
	step: 1,
	connect: true,
	range: {
		'min': 5,
		'max': 20
	}
});

var skipValues = [
	document.getElementById('skip-value-lower'),
	document.getElementById('skip-value-upper')
];

slider.noUiSlider.on('update', function( values, handle ) {
	skipValues[handle].value = values[handle];
});
<!-- fin slider -->

<!-- code angular -->
var app = angular.module('tutoApp', ['produitModule']);

var produitModule = angular.module('produitModule', []);
produitModule.controller('produitController', ['$scope', function ($scope) {
}]);

produitModule.controller("produitController", function($scope, $http) {
	$scope.produits = [{"ID":77,"title":"frite","prix":"5","type":"aliment"},{"ID":88,"title":"marteau","prix":"7","type":"outil"},{"ID":88,"title":"masse","prix":"10","type":"outil"}];
});
<!-- fin code angular -->

<html ng-app="tutoApp">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.min.js"></script>


<link rel='stylesheet' id='nouislider-css-css'  href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.min.css' type='text/css' media='all' />


<div ng-controller="produitController">
		title <input type="text" ng-model="search.title"><br>
		type <input type="text" ng-model="search.type"><br>
		prix <input type="text" ng-model="search.prix">

		<div id="slider" style="width: 200px;margin:20px;"></div>

		<input id="skip-value-lower" type="text" value="5">
		<input id="skip-value-upper" type="text" value="20" >


		<ul>
			<li ng-repeat="produit in filtered  = (produits | filter:search)">- 
			l'id {{produit.ID}}<br>
			le titre {{produit.title}}<br>
			type {{produit.type}}<br>
			prix {{produit.prix}}<br>
			</li>
		</ul>
	</div>

使用价格滑块noUiSlider搜索角度JS

0 个答案: