How to filter a Text in a div with angle JS

Question

How to filter a Text in a div with angle JS

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

The problem is to mount a filter in AngularJS to capture words, querys, within a text, for example as if searching a word in a craft.

<div ng-app="" ng-controller="namesController">

<p><input type="text" ng-model="test"></p>

<div ng-????="filter:test>
   <p> {{ texto }} </p>
</div>


</div>

jquery angularjs filtro

asked by anonymous 30.01.2015 / 00:37

3 answers

Format result with concatenated field Error installing SASS in Windows 8

score 1 · Answer 1

Use the angular filter itself

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <label>Filtrar: <input ng-model="searchText"></label>
    <div ng-repeat="user in users | filter:searchText">
      <p>
      Nome : {{user.nome}} -
      Idade : {{user.idade}}
      </p>
    </div>
</div>

Javascript

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.users = [];
    $scope.users.push({'nome':"Francisco", 'idade': 94});
    $scope.users.push({'nome':"Raimunda", 'idade': 85});
    $scope.users.push({'nome':"Francinaldo", 'idade': 77});
    $scope.users.push({'nome':"Tereza", 'idade': 87});
});

score 0 · Answer 2

I also could not leave the search 'insensitive' with the Angular, and I did it through the Jquery base with Font and using javascript as follows:

$(function(){
                $("#txtBusca").keyup(function(){
                        var texto = $(this).val().toUpperCase();

                        $(".ulItens li").css("display", "block");
                        $(".ulItens li").each(function(){
                                if($(this).text().toUpperCase().indexOf(texto) < 0)
                                   $(this).css("display", "none");
                        });
                });
        });

.ulItens - > with the class applied in all tags <ul> and with toUpperCase I can search without the standard case sensitive.

score 0 · Answer 3

Staff solved the problem with the code below:

Filter PHP list with angularJS

View the code here on the plunker

I happen to be having problems with words that are capitalized eg a word that is "Protocol" and I type "protocol", the filter does not find it.

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.model = {
        filter: ''
    };
});

app.directive('myHtmlFilter', [function() {
    return {
        restrict: 'A',
        scope: {
          filter: '=myHtmlFilter',
          element: '@'
        },
        link: function(scope, elem, attrs) {
          scope.$watch('filter', function(newval, oldval) {
            elem
              .find('ul>li')
                  .hide()
                  .find(scope.element)
                  .filter(':contains("'+scope.filter+'")')
               .parent()
                  .show();
          })
        }
    }
}]);

Index.html

<input type="text" ng-model="model.filter" />

<div my-html-filter="model.filter" element="h2">
  <ul>
    <li id="1">
        <h2>Protocolo</h2>
        <p>The Message...</p>
    </li>
    <li id="2">
        <h2>My second Post</h2>
        <p>The Message...</p>
    </li>
    <li id="3">
        <h2>My third Post</h2>
        <p>The Message...</p>
    </li>
  </ul>
</div>