Angularjs: Creating Query Form For Database

So I am having a little problem creating a very simple query form due to my lack of understanding about coding. As you can see in the app.js below, I have FormController, which ret

Solution 1:

Answers may be opinionated since there are multiple ways to accomplish this.

I would advise to restructure html. Have a single controller that wraps the "form" and the contents of SolrController. Also the "form" should really become a <form>. In angular there is a default controller created for this tag and it helps a lot with managing validation and handling submit.

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

Mind name attribute for the form. It will help to access the form in the scope. Actually when there is a name angular creates $scope.queryForm in parent controller By default all buttons (and <input type="submit") on form submit on click. But type="button" will prevent it. So remove it

Controller SolrController. It's inappropriate to perform a request before user had a change to input something. $http.get should work on a click handler which we choose to be submit event.

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

Hope this helps