Question

因为我对编码缺乏了解，所以创建一个非常简单的查询表单时遇到了一些问题。正如你在下面的app.js中看到的，我有FormController，它从表单中检索信息，将其提供给jsonUrlGen函数，该函数创建一个自定义URL，然后发送到我的SolrController，它访问该URL并提取JSON信息从它。

然而，在退后一步并查看我的代码结构错误之后就很清楚了，我错过了一个app.service来链接我的两个控制器之间的共享变量。我甚至不确定在这种情况下我是否需要两个控制器，但它只是在编码时发生。

如果有人能告诉我我在这里做错了什么，我会非常感激，因为代码完全无效。

感谢。

.HTML文件

<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;
        });

    });

    })();

Answer 1

答案可能是固执己见的，因为有多种方法可以实现这一目标。

我建议重组html。有一个包含＆＃34;形式的控制器＆＃34;以及SolrController的内容。还有＆＃34;形式＆＃34;应该真的成为<form>。在角度中，为此标记创建了一个默认控制器，它有助于管理validation和处理submit。

<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;
            });
        });
    };
})

希望这有帮助

AngularJS：为数据库创建查询表单

1 个答案: