admin管理员组

文章数量:1023213

I am new in AngularJS but I have basic HTML and JavaScript knowledge.

I have a list of links on page, and a search box. I want to filter list elements dynamically according to the text typed in the box. I have found some example but they use external lists- not a list typed on same html file.

Exactly this: /

As you guess I cannot make filtered elements visible/unvisible like this. How can I filter them (all html codes must be in 1 page so we cannot call another js file, controller or etc.)

<!DOCTYPE html>
<html>
<body>
<script src=".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="">google</a></li>
  <li><a href="">bbc</a></li>
  <li><a href="">microsoft</a></li>
</ul>  

</body>
</html>

Note: If there is a way with just Javascript or etc. without using angular js, it is wele as well.

Last Edit: All 3 answers are correct and working fine right now.

I am new in AngularJS but I have basic HTML and JavaScript knowledge.

I have a list of links on page, and a search box. I want to filter list elements dynamically according to the text typed in the box. I have found some example but they use external lists- not a list typed on same html file.

Exactly this: https://code.ciphertrick./demo/angularajaxsearch/

As you guess I cannot make filtered elements visible/unvisible like this. How can I filter them (all html codes must be in 1 page so we cannot call another js file, controller or etc.)

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis./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.">google</a></li>
  <li><a href="https://bbc.">bbc</a></li>
  <li><a href="https://microsoft.">microsoft</a></li>
</ul>  

</body>
</html>

Note: If there is a way with just Javascript or etc. without using angular js, it is wele as well.

Last Edit: All 3 answers are correct and working fine right now.

  • javascript
  • html
  • angularjs
  • search
  • angularjs-directive
Share Improve this question edited Dec 28, 2016 at 15:06 abidinberkay asked Dec 28, 2016 at 12:30 abidinberkayabidinberkay 2,0355 gold badges49 silver badges78 bronze badges 7
  • <li ng-repeat="i in berkay | filter:searchString"> did you use this? – Sai Commented Dec 28, 2016 at 12:35
  • can you please explain what you want to filter in the above html file. I didn't get exactly what you want to filter – Venkatesh Konatham Commented Dec 28, 2016 at 12:38
  • @VenkateshKonatham code.ciphertrick./demo/angularajaxsearch I want to filter list of links. – abidinberkay Commented Dec 28, 2016 at 12:43
  • so you want to implement like above. But the links will be static from html right? – Venkatesh Konatham Commented Dec 28, 2016 at 12:59
  • @VenkateshKonatham I did not understand what is static link. But I want the links are able to redirect. Just below, in answer of "Nagaveer Gowda" the code is working great. If you just copy it a simple notepad and open in browser you will see it is working for filtering but links are not redirecting.. The problem is this. – abidinberkay Commented Dec 28, 2016 at 13:40
 |  Show 2 more ments

3 Answers 3

Reset to default 2

Please check this updated answer. It will redirect when you click on it. 

<script src="https://ajax.googleapis./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.'
    }, {
      name: "bbc",
      link: 'https://bbc.'
    }, {
      name: "microsoft",
      link: 'https://microsoft.'
    }];
  });
</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>

You can add javascript inside HTML itself

<script src="https://ajax.googleapis./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.'
    }, {
      name: "bbc",
      link: 'https://bbc.'
    }, {
      name: "microsoft",
      link: 'https://microsoft.'
    }];
  });
</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>

Could you try this. I hope it works for you :) 

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis./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."},{Text:"https://bbc."},{Text:"https://microsoft."}];
$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>

I am new in AngularJS but I have basic HTML and JavaScript knowledge.

I have a list of links on page, and a search box. I want to filter list elements dynamically according to the text typed in the box. I have found some example but they use external lists- not a list typed on same html file.

Exactly this: /

As you guess I cannot make filtered elements visible/unvisible like this. How can I filter them (all html codes must be in 1 page so we cannot call another js file, controller or etc.)

<!DOCTYPE html>
<html>
<body>
<script src=".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="">google</a></li>
  <li><a href="">bbc</a></li>
  <li><a href="">microsoft</a></li>
</ul>  

</body>
</html>

Note: If there is a way with just Javascript or etc. without using angular js, it is wele as well.

Last Edit: All 3 answers are correct and working fine right now.

I am new in AngularJS but I have basic HTML and JavaScript knowledge.

I have a list of links on page, and a search box. I want to filter list elements dynamically according to the text typed in the box. I have found some example but they use external lists- not a list typed on same html file.

Exactly this: https://code.ciphertrick./demo/angularajaxsearch/

As you guess I cannot make filtered elements visible/unvisible like this. How can I filter them (all html codes must be in 1 page so we cannot call another js file, controller or etc.)

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis./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.">google</a></li>
  <li><a href="https://bbc.">bbc</a></li>
  <li><a href="https://microsoft.">microsoft</a></li>
</ul>  

</body>
</html>

Note: If there is a way with just Javascript or etc. without using angular js, it is wele as well.

Last Edit: All 3 answers are correct and working fine right now.

  • javascript
  • html
  • angularjs
  • search
  • angularjs-directive
Share Improve this question edited Dec 28, 2016 at 15:06 abidinberkay asked Dec 28, 2016 at 12:30 abidinberkayabidinberkay 2,0355 gold badges49 silver badges78 bronze badges 7
  • <li ng-repeat="i in berkay | filter:searchString"> did you use this? – Sai Commented Dec 28, 2016 at 12:35
  • can you please explain what you want to filter in the above html file. I didn't get exactly what you want to filter – Venkatesh Konatham Commented Dec 28, 2016 at 12:38
  • @VenkateshKonatham code.ciphertrick./demo/angularajaxsearch I want to filter list of links. – abidinberkay Commented Dec 28, 2016 at 12:43
  • so you want to implement like above. But the links will be static from html right? – Venkatesh Konatham Commented Dec 28, 2016 at 12:59
  • @VenkateshKonatham I did not understand what is static link. But I want the links are able to redirect. Just below, in answer of "Nagaveer Gowda" the code is working great. If you just copy it a simple notepad and open in browser you will see it is working for filtering but links are not redirecting.. The problem is this. – abidinberkay Commented Dec 28, 2016 at 13:40
 |  Show 2 more ments

3 Answers 3

Reset to default 2

Please check this updated answer. It will redirect when you click on it. 

<script src="https://ajax.googleapis./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.'
    }, {
      name: "bbc",
      link: 'https://bbc.'
    }, {
      name: "microsoft",
      link: 'https://microsoft.'
    }];
  });
</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>

You can add javascript inside HTML itself

<script src="https://ajax.googleapis./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.'
    }, {
      name: "bbc",
      link: 'https://bbc.'
    }, {
      name: "microsoft",
      link: 'https://microsoft.'
    }];
  });
</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>

Could you try this. I hope it works for you :) 

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis./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."},{Text:"https://bbc."},{Text:"https://microsoft."}];
$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>

本文标签： javascriptAngularJS dynamic search box on same pageStack Overflow

版权声明：本文标题：javascript - AngularJS dynamic search box on same page - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745557993a2155991.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。