[英]AngularJS dynamic search box on same page
我是AngularJS的新手,但我有基本的HTML和JavaScript知识。
我在页面上有一个链接列表和一个搜索框。 我想根据框中键入的文本动态过滤列表元素。 我找到了一些示例,但它们使用外部列表-而不是在同一html文件中键入的列表。
正是这样: https : //code.ciphertrick.com/demo/angularajaxsearch/
如您所料,我无法像这样使过滤后的元素可见/不可见。 我该如何过滤它们(所有的html代码都必须在一页中,因此我们无法调用其他js文件,控制器等)。
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div class="bar">
<input type="text" class="search" ng-model="searchString" />
</div>
<ul class="data-ctrl">
<li ng-repeat="i in berkay | searchFor:searchString">
</li>
</ul>
<ul name="berkay">
<li><a href="https://google.com">google</a></li>
<li><a href="https://bbc.com">bbc</a></li>
<li><a href="https://microsoft.com">microsoft</a></li>
</ul>
</body>
</html>
注意:如果有一种只使用Javascript等而不使用angular js的方法,也欢迎使用。
最后编辑:所有3个答案都是正确的,并且现在可以正常工作。
你可以试试这个吗? 我希望这个对你有用 :)
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
$scope.searchString=[{Text:"https://google.com"},{Text:"https://bbc.com"},{Text:"https://microsoft.com"}];
$scope.searchString2=$scope.searchString;
$scope.$watch('search', function(val)
{
$scope.searchString= $filter('filter')($scope.searchString2, val);
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="bar">
<input type="text" class="search" ng-model="search" />
</div>
<ul>
<li ng-repeat="item in searchString">
<a href="{{item.Text}}">{{item.Text}}</>
</li>
</ul>
</div>
</body>
</html>
您可以在HTML本身内添加javascript
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script> var app = angular.module("app", []); app.controller("myCtrl", function($scope) { $scope.berkay = [{ name: "google", link: 'https://google.com' }, { name: "bbc", link: 'https://bbc.com' }, { name: "microsoft", link: 'https://microsoft.com' }]; }); </script> <div ng-app="app" ng-controller="myCtrl"> <div class="bar"> <!-- 1. If you want to search everything(both link and name), just use searchString <input type="text" class="search" ng-model="searchString"> 2. If you want to search only name change searchString to searchString.name <input type="text" class="search" ng-model="searchString.name"> 3. If you want to search only link change searchString to searchString.link <input type="text" class="search" ng-model="searchString.link"> --> <input type="text" class="search" ng-model="searchString" /> </div> <ul class="data-ctrl"> <li ng-repeat="i in berkay | filter:searchString"> <a href="{{i.link}}">{{i.name}}</a> </li> </ul> </div>
请检查此更新的答案。 单击它时它将重定向。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script> var app = angular.module("app", []); app.controller("myCtrl", function($scope) { $scope.berkay = [{ name: "google", link: 'https://google.com' }, { name: "bbc", link: 'https://bbc.com' }, { name: "microsoft", link: 'https://microsoft.com' }]; }); </script> <div ng-app="app" ng-controller="myCtrl"> <div class="bar"> <!-- 1. If you want to search everything(both link and name), just use searchString <input type="text" class="search" ng-model="searchString"> 2. If you want to search only name change searchString to searchString.name <input type="text" class="search" ng-model="searchString.name"> 3. If you want to search only link change searchString to searchString.link <input type="text" class="search" ng-model="searchString.link"> --> <input type="text" class="search" ng-model="searchString" /> </div> <ul class="data-ctrl"> <li ng-repeat="i in berkay | filter:searchString"> <a href="{{i.link}}">{{i.name}}</a> </li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.