Buscar en un valor filtrado en angularjs

Question

Tengo un escenario en el que necesito buscar los valores filtrados. El siguiente es el código

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

    app.controller('MainCtrl', function($scope) {
      $scope.searchText = '';

      $scope.items = [
        "Try_1",
        "Try_2",
        "Try_3"
      ]
    });

    app.filter('remove', function() {
      return function(text) {
        if (text) {
          return text.replace('_', ' ');
        }
      }
    })

Html

    <body ng-controller="MainCtrl">
      <input type="text" ng-model="searchText">
      <div data-ng-repeat="x in items | filter:searchText"> {{x|remove}} </div>
    </body>

Aquí, cuando intento buscar "probar 1", no se muestra ningún resultado,
pero para "try_1" muestra "try 1".
¿Hay alguna solución en la que cuando busquemos "try 1" muestre "try 1".

Aquí está el enlace de plunker.

javascript angularjs

1

Dinesh Sundaraneedi 15 feb. 2018 a las 08:37

Answer 1

Me gusta tu pregunta, también trato de encontrar una solución para eso, encontré 2 opciones para ello:

cambia tu modelo como object
use factory en lugar de filter como muestra

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

app.filter('remove', function() {
  return function(object) {
    if (object) {
      object["search"] = object["name"].replace('_', ' ');
      return object["search"];
    }
  }
})

app.factory("search", function() {
  var factory = {};

  factory.searchAble = function(array) {
    var output = [];
    angular.forEach(array,
      function(item) {
        const removeUnderLine = item.replace('_', ' ');
        var object = {};
        object["name"] = item;
        object["search"] = removeUnderLine;
        output.push(object)
      });

    return output;
  }

  return factory;
});


app.controller("ctrl", function($scope, search) {

  $scope.searchText = '';

  //change array text to array object
  $scope.items = [{
      name: "Try_1"
    },
    {
      name: "Try_2"
    },
    {
      name: "Try_3"
    }
  ];

  //put array text to factory handler
  var items2 = [
    "Try_1",
    "Try_2",
    "Try_3"
  ];

  //scope result
  $scope.items2 = search.searchAble(items2);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h3>option 1: change array text to array object</h3>
  <input type="text" ng-model="searchText">
  <div data-ng-repeat="x in items | filter:searchText"> {{x|remove}} </div>
  <hr />
  <h3>option 2: use factory instead filter</h3>
  <input type="text" ng-model="searchText2">
  <div data-ng-repeat="x in items2 | filter: searchText2"> {{x.search}} </div>

</div>

0

Maher 15 feb. 2018 a las 07:07

Answer 2

El filtro funciona en la matriz original, por lo que incluso después de reemplazar el '_' con el espacio, la matriz original no se ve afectada, así que es mejor cambiar la matriz y probar el siguiente código.

app.js

 app.controller('MainCtrl', function($scope) {
          $scope.searchText = '';

          $scope.items = [
            "Try_1",
            "Try_2",
            "Try_3"
          ]

           $scope.items= $scope.items.map(function(text) {
              return text.replace('_', ' ');

           })
        });

html

 <div data-ng-repeat="x in items | filter:searchText"><p>{{x}}</p></div>

0

Akshay 15 feb. 2018 a las 06:34

Buscar en un valor filtrado en angularjs

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript