Javascript 同一页面上的AngularJS动态搜索框_Javascript_Html_Angularjs_Search_Angularjs Directive

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

javascript html angularjs search

Javascript 同一页面上的AngularJS动态搜索框,javascript,html,angularjs,search,angularjs-directive,Javascript,Html,Angularjs,Search,Angularjs Directive,我是AngularJS新手，但我有基本的HTML和JavaScript知识我在页面上有一个链接列表和一个搜索框。我想根据框中键入的文本动态筛选列表元素。我找到了一些示例，但它们使用外部列表，而不是在同一html文件上键入的列表正是这样：正如您所猜测的，我不能像这样使过滤后的元素可见/不可见。我如何过滤它们（所有html代码必须在一个页面中，因此我们不能调用另一个js文件、控制器等）注意：如果有一种不使用angular js而只使用Javascript等的方法，也欢迎

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

我在页面上有一个链接列表和一个搜索框。我想根据框中键入的文本动态筛选列表元素。我找到了一些示例，但它们使用外部列表，而不是在同一html文件上键入的列表

正是这样：

正如您所猜测的，我不能像这样使过滤后的元素可见/不可见。我如何过滤它们（所有html代码必须在一个页面中，因此我们不能调用另一个js文件、控制器等）

注意：如果有一种不使用angular js而只使用Javascript等的方法，也欢迎使用

最后一次编辑：现在所有3个答案都是正确的，工作正常。

你能试试这个吗。我希望它对你有用：）


var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$filter）{
$scope.searchString=[{Text:]https://google.com}，{Text:https://bbc.com}，{Text:https://microsoft.com"}];
$scope.searchString2=$scope.searchString；
$scope.$watch（'search'，函数（val）
{ 
$scope.searchString=$filter（'filter'）（$scope.searchString2，val）；
});
});


{{item.Text}

你能试试这个吗。我希望它对你有用：）


var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$filter）{
$scope.searchString=[{Text:]https://google.com}，{Text:https://bbc.com}，{Text:https://microsoft.com"}];
$scope.searchString2=$scope.searchString；
$scope.$watch（'search'，函数（val）
{ 
$scope.searchString=$filter（'filter'）（$scope.searchString2，val）；
});
});


{{item.Text}

您可以在HTML本身中添加javascript


var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.berkay=[{
名称：“谷歌”，
链接：'https://google.com'
}, {
姓名：“bbc”，
链接：'https://bbc.com'
}, {
名称：“微软”，
链接：'https://microsoft.com'
}];
});

您可以在HTML本身中添加javascript


var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.berkay=[{
名称：“谷歌”，
链接：'https://google.com'
}, {
姓名：“bbc”，
链接：'https://bbc.com'
}, {
名称：“微软”，
链接：'https://microsoft.com'
}];
});

请检查此更新的答案。当你点击它时，它将重定向


var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.berkay=[{
名称：“谷歌”，
链接：'https://google.com'
}, {
姓名：“bbc”，
链接：'https://bbc.com'
}, {
名称：“微软”，
链接：'https://microsoft.com'
}];
});

请检查此更新的答案。当你点击它时，它将重定向


var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.berkay=[{
名称：“谷歌”，
链接：'https://google.com'
}, {
姓名：“bbc”，
链接：'https://bbc.com'
}, {
名称：“微软”，
链接：'https://microsoft.com'
}];
});

您使用过这个吗？请您解释一下要在上面的html文件中过滤什么内容。我没有得到你想要的filter@VenkateshKonatham我想过滤链接列表。所以你想实现上面的方法。但是链接将是静态的，对吗？@VenkateshKonatham我不明白什么是静态链接。但我希望链接能够重定向。就在下面，作为对“Nagaveer Gowda”的回答，代码工作得很好。若你们只是把它复制到一个简单的记事本上，然后在浏览器中打开，你们会看到它正在进行过滤，但链接并没有重定向。。问题在于。

您使用过这个吗？请您解释一下要在上面的html文件中过滤什么。我没有得到你想要的filter@VenkateshKonatham我想过滤链接列表。所以你想实现上面的方法。但是链接将是静态的，对吗？@VenkateshKonatham我不明白什么是静态链接。但我希望链接能够重定向。就在下面，作为对“Nagaveer Gowda”的回答，代码工作得很好。若你们只是把它复制到一个简单的记事本上，然后在浏览器中打开，你们会看到它正在进行过滤，但链接并没有重定向。。问题是，我没有其他文件，所有代码必须在一个html文件中。那么，如何将您的建议添加到html文件中呢？输出仅为{{item.value}。屏幕上没有列表，但页面上唯一的结果是{{item.value}}well。该过滤器工作得很好，但数据是文本，我会添加链接作为数据，所以当我点击数据，它必须重定向到相应的网站。我可以将它们添加为链接吗？如果它对您有效，您可以检查厚度并解决您的问题吗？我没有其他文件，所有代码必须在一个html文件中。那么，我怎样才能把你的建议添加到我的html文件中呢

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

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