All geek questions in one place

AngularJS: creating a query form for a database

So I had a little problem creating a very simple request form due to my ignorance of coding. As you can see in app.js below, I have a FormController that retrieves information from the form, passes it to the jsonUrlGen function, which creates its own URL, which is then sent to my SolrController, which accesses that URL and retrieves the information JSON from it.

However, it’s quite obvious, taking a step back and looking at the fact that the structure of my code is incorrect and I am missing an application. to bind common variables between my two controllers. I'm also not sure if I need two controllers in this case, but this happened when I encoded it.

If anyone can tell me what I'm doing wrong, I would really appreciate it because the code is just flat not working.

Thank.

.HTML FILE

<html ng-app="solrApp">
<head>
    <link link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <link link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
    <script type= "text/javascript" src="app.js"></script>
</head>
<body>
    <!--<h1 class="headline">Logo or Something Here</h1>-->
    <div class="logo"><img src="images/CubedE.png" id="cubedE"/></div>
    <div class = "queryForm" ng-controller="FormController">
        <input type="text" class="queryBox" id="mainQueryString" placeholder="Query String" ng-model="fullQuery.queryString"><br />
        <input type="text" class="queryBox" placeholder="Filter Query" ng-model="fullQuery.filterQuery"><br />
        <input type="text" class="queryBox" placeholder="Sort By" ng-model="fullQuery.sortBy"><br />
        <h2>Extract only from rows:</h2>
        <input type="text" class="halfQueryBox" placeholder="Start" ng-model="fullQuery.startRow"><input type="text" class="halfQueryBox" placeholder="End" ng-model="fullQuery.endRow"><br />
        <input type="text" class="queryBox" placeholder="Field List (Separate by comma)" ng-model="fullQuery.fieldList"><br />
        <input type="text" class="queryBox" placeholder="Raw Query Parameters (key1=val1&key2=val2)" ng-model="fullQuery.rawQuery"><br />
        <button type="button" ng-click="jsonUrlGen()">Submit Query</button>
    </div>
    <div class = "results" ng-controller="SolrController">
        <ul>
            <li ng-repeat="item in items">
                {{ item.key }} - <em>{{ item.value }}</em>
            </li>
        </ul>
    </div>

</body>
</html>

APP.JS

(function(){
var app = angular.module('solrApp', []);

    app.controller('FormController', function($scope) {

        $scope.fullQuery = {
            queryString: '',
            filterQuery: '',
            sortBy: '',
            startRow: '',
            endRow: '',
            fieldList: '',
            rawQuery: ''
        }

        $scope.jsonUrlGen = function(){

            var jsonURL = "http://localhost:8983/solr/core/select?";

            if($scope.fullQuery.queryString !== '') {
                jsonURL =  jsonURL + "q=" + $scope.fullQuery.queryString;  
            }
            else if($scope.fullQuery.filterQuery !== '') {
                jsonURL = jsonURL + "&fq=" + $scope.fullQuery.filterQuery;
            }
            else if($scope.fullQuery.sortBy !== '') {
                jsonURL = jsonURL + "&sort=" + $scope.fullQuery.sortBy;
            }
            else if($scope.fullQuery.startRow !== '') {
                jsonURL = jsonURL + "&start=" + $scope.fullQuery.startRow;
            }
            else if($scope.fullQuery.endRow !== '') {
                jsonURL = jsonURL + "&rows=" + $scope.fullQuery.endRow;
            }
            else if($scope.fullQuery.fieldList !== '') {
                jsonURL = jsonURL + "&fl=" + $scope.fullQuery.fieldList;
            }
            else {
                return "exception thrown";    
            }

            jsonURL = jsonURL + "wt=json";
            return jsonURL;
        };

    });

    app.controller('SolrController', function($scope, $http){
    $http.get($scope.jsonUrlGen)
        .then(function(res){
            $scope.items = res.data;
        });

    });

    })();
0
source share
1 answer

Answers can be self-confident, as there are several ways to do this.

I would advise restructuring html. Have one controller that wraps the "form" and contents SolrController. Also the "form" must really become <form>. In angular, a default controller is created for this tag, which helps in managing validation and submit processing .

<div class="results" ng-controller="SolrController">
  <form class="queryForm" name="queryForm" ng-submit="submit()">
    <input type="text" class="queryBox" id="mainQueryString" placeholder="Query String" ng-model="fullQuery.queryString"><br />
    <input type="text" class="queryBox" placeholder="Filter Query" ng-model="fullQuery.filterQuery"><br />
    <input type="text" class="queryBox" placeholder="Sort By" ng-model="fullQuery.sortBy"><br />
    <h2>Extract only from rows:</h2>
    <input type="text" class="halfQueryBox" placeholder="Start" ng-model="fullQuery.startRow"><input type="text" class="halfQueryBox" placeholder="End" ng-model="fullQuery.endRow"><br />
    <input type="text" class="queryBox" placeholder="Field List (Separate by comma)" ng-model="fullQuery.fieldList"><br />
    <input type="text" class="queryBox" placeholder="Raw Query Parameters (key1=val1&key2=val2)" ng-model="fullQuery.rawQuery"><br />
    <button ng-disabled="queryForm.$invalid">Submit Query</button>
  </form>
  <ul>
    <li ng-repeat="item in items">
      {{ item.key }} - <em>{{ item.value }}</em>
    </li>
  </ul>
</div>

Mind name . . , angular $scope.queryForm
( <input type="submit") . type="button" .

SolrController. , -. $http.get , .

app.controller('SolrController', function($scope, $http){
    $scope.fullQuery = {};//ng-model will take care of creating all properties
    function jsonUrlGen(){ //same code here
    }
    $scope.submit = function(){
        $http.get(jsonUrlGen())
            .then(function(res){
                $scope.items = res.data;
            });
        });
    };
})

,

0

Source: https://habr.com/ru/post/1672818/

More articles:


All Articles