How to search for files by name

Asked

Viewed 1,025 times

1

I am trying to search through names, in a folder containing several different JSON files .

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

app.controller('customersCtrl', ['$scope','$http',function($scope, $http){

    $scope.buscar = function(name){
        $scope.search = name;
        $scope.lista = $scope.pesquisa;
        if(name != null){
            $http.get("http://10.10.6.22/json").success(function(data)
         {
            $scope.pesquisa = data;
         });
            return $scope.lista = {};
        }
    else{
      return "O Nome nao existente";
        }
    }
}]);

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="css/lattes.css"/>

        <title>Lattes</title>

    </head>

    <body ng-controller="customersCtrl">

        <h1>Buscador lattes</h1>
        <div class="col-xs-12 col-md-12" id="teste">
                <!--Com botão-->
                <input type="text" placeholder="Search" ng-model="search"class="ng-pristine ng-untouched ng-valid">
                <button type="submit" ng-click="buscar(name)" class="btn btn-success">
                    <i classe="glyphicon glyphicon-search"></i></button>
                </div>

    <!--Sem botão-->
    <!-- <input type="text" ng-model="data"ng-keyup="procurar(data)"> -->


        <!--CCM-->
        <div id="name">
        <table class="table table-striped">
            <!-- <thead>
                    <tr>
                        <th>Data</th>
                        <th>Artigo</th>
                        <th>Qualis</th>
                        <th>Evento</th>
                    </tr>
            </thead> -->
            <tbody>
                <tr ng-repeat="x in lista | filter: search">
                    <td>{{x.ano}}</td>
                    <td>{{x.artigo}}</td>
                    <td>{{x.qualis}}</td>
                    <td>{{x.evento}}</td>
                </tr>
            </tbody>
        </table>
        </div>
        <!--CCM-->

    </body>
    <script src="lib/angular.js"></script>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <!--<script type="text/javascript" src="js/app.js"></script> -->
    <script type="text/javascript" src="js/controller.js"></script>
</html>

It didn’t work, so I tried this way no more will, or when it goes, only returns me 1 of my two options.

var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http',function($scope, $http){
        $http.get("http://10.10.6.22/json/MarcosdeCastro.php").success(function(data){
                $scope.pesquisa = data;
            $scope.nome = "Marcos de Castro";
            $scope.buscar = function(name){
            $scope.search = name;
            $scope.lista = $scope.pesquisa;
            if((name && nome)=='Marcos de Castro'){
            $scope.lista = {};
            }
        }
    });
            $http.get("http://10.10.6.22/json/MauroHenrique.php").success(function(data){
                $scope.pesquisa = data;

            $scope.nome = "Mauro Henrique";
            $scope.buscar = function(name){
            $scope.search = name;
            $scope.lista = $scope.pesquisa;
            if((name && nome)=='Mauro Henrique'){
            $scope.lista = {};
            }
        }
    }); 

}]);

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="css/lattes.css"/>

        <title>Lattes</title>

    </head>

    <body ng-controller="customersCtrl">

        <h1>Buscador lattes</h1>
        <div class="col-xs-12 col-md-12" id="teste">
                <!--Com bot�o-->
                <input type="text" placeholder="Search" ng-model="search"class="ng-pristine ng-untouched ng-valid">
                <button type="submit" ng-click="buscar(search)" class="btn btn-success">search
                    <i classe="glyphicon glyphicon-search"></i></button>
                </div>

    <!--Sem bot�o-->
    <!-- <input type="text" ng-model="data"ng-keyup="procurar(data)"> -->


        <!--CCM-->
        <div id="name">
        <table class="table table-striped">
            <!-- <thead>
                    <tr>
                        <th>Data</th>
                        <th>Artigo</th>
                        <th>Qualis</th>
                        <th>Evento</th>
                    </tr>
            </thead> -->
            <tbody>
                <tr ng-repeat="x in lista | filter: search">
                    <td>{{x.ano}}</td>
                    <td>{{x.artigo}}</td>
                    <td>{{x.qualis}}</td>
                    <td>{{x.evento}}</td>
                </tr>
            </tbody>
        </table>
        </div>
        <!--CCM-->

    </body>
    <script src="lib/angular.js"></script>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <!--<script type="text/javascript" src="js/app.js"></script> -->
    <script type="text/javascript" src="js/controller.js"></script>
</html>
javascript html html5 angularjs

  • What is your question exactly? Is something not working? Is there an error message?

  • There’s no answer at the moment. For example, I know that inside the json directory has a file called Mauro.json, but when I search through the name Mauro it does not return anything.

1 answer

0


Looking at your code, and assuming that’s all the code, 

<input type="text" placeholder="Search" ng-model="search"class="ng-pristine ng-untouched ng-valid">

The ng-model of the input has the value search, however in Utan 

<button type="submit" ng-click="buscar(name)" class="btn btn-success">

You use name.

Then, in your javascript 

$scope.buscar = function(name){
    $scope.search = name;
    $scope.lista = $scope.pesquisa;

You use name, that was never settled anywhere, and exchange the value to the ng-model of input to be equal to a parameter that has no value.

If you use 

<button type="submit" ng-click="buscar(search)" class="btn btn-success">

and in Javascript

$scope.buscar = function(name){
    //$scope.search = name;
    $scope.lista = $scope.pesquisa;
    if(name != null){

(note the commented line) it is very likely that the code does what you want.

Browser other questions tagged javascript html html5 angularjs

You are not signed in. Login or sign up in order to post.