javascript - AngularJS同一页面上的动态搜索框

标签 javascript html angularjs search angularjs-directive

我是 AngularJS 的新手,但我有基本的 HTML 和 JavaScript 知识。

我在页面上有一个链接列表和一个搜索框。我想根据框中输入的文本动态过滤列表元素。我找到了一些例子,但他们使用外部列表——而不是在同一 html 文件上键入的列表。

正是这样: https://code.ciphertrick.com/demo/angularajaxsearch/

正如您所猜测的,我无法像这样使过滤后的元素可见/不可见。我如何过滤它们(所有 html 代码必须在 1 页中,这样我们就不能调用其他 js 文件、 Controller 等)

<!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>   

关于javascript - AngularJS同一页面上的动态搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41362209/

相关文章:

javascript - Angular 切换自定义下拉菜单

javascript - 使用 Passed Mongodb 通过 res.render ('jadeview' 快速检索数据,在 Jade View 中邮寄 :mongodbretriveddata) in script. 标签?

javascript - ASP.NET MVC 5 分钟后强制页面重定向(不同页面)

javascript - Breeze 底层数组在保存时出现 null 错误

javascript - 如何使用 C# 从网站读取字符串

javascript - 有人可以帮助我使用带有动态元素的 CSS/jQuery 固定 header 吗?

css 和 div - parent 对 child 的属性

javascript - Angular 自定义过滤器在服务器上不起作用

html - 找到断点不确定要使用哪个媒体查询

javascript - 系统配置 defaultExtension 不适用于 Django