Question

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

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

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

正如您猜测的那样，我不能像这样使过滤后的元素可见/不可见。如何过滤它们（所有html代码必须在1页，所以我们不能调用另一个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等方式而不使用角度js，也欢迎使用。

上次修改：所有3个答案都是正确的，现在正常工作。

Answer 1

你能尝试一下吗？我希望它适合你:)

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

Answer 2

您可以在HTML内部添加javascript

＆＃13;

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

＆＃13;

Answer 3

请检查此更新的答案。点击它时它会重定向。

＆＃13;

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

＆＃13;

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

3 个答案: