Question

所以我创建了一个非常简单的HTML表单，其中包含一些我想使用AngularJS检索的字段。使用这些检索到的值，我希望创建一个动态链接（最终将用于创建自定义Solr查询）。

请记住，我对Angular和整体发展都很陌生。

感谢您的帮助！

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 = "queryForm" ng-controller="FormController">
        <input type="text" class="queryBox" id="mainQueryString" placeholder="Query String"><br />
        <input type="text" class="queryBox" placeholder="Filter Query"><br />
        <input type="text" class="queryBox" placeholder="Sort By"><br />
        <h2>Extract only from rows:</h2>
        <input type="text" class="halfQueryBox" placeholder="Start"><input type="text" class="halfQueryBox" placeholder="End"><br />
        <input type="text" class="queryBox" placeholder="Field List (Separate by comma)"><br />
        <input type="text" class="queryBox" placeholder="Raw Query Parameters (key1=val1&key2=val2)"><br />
        <button type="button">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>

JS：

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

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

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

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

    });

    var jsonURL = function(fullQuery){

          /*A function here that will put together a string into the form of a 
          URL query using all of the value inputs from the form above.
          Ex: //http://localhost:8983/solr/CORE/select?q=QUERYSTRING&fq=FILTERQUERY
          &start=START&rows=END&fl=FIELDLIST&wt=json*/

    };

})();

Answer 1

您想要使用$ scope模型对象并执行数据绑定。所以在你的控制器中。

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

然后在你的html中

<input type="text" class="queryBox" id="mainQueryString" placeholder="Query String" ng-model="fullQuery.queryString"><br />

使用ng-model将该html元素的值绑定到控制器的$ scope模型中的变量。

在访问元素的javascript中，您必须使用$scope.，但在html中，您可以省略ng-model和{{}}

之类的内容

所以现在在你的函数中构建url你可以使用$scope.fullQuery.queryString等...就像变量一样。

使用表单值与AngularJS创建动态链接

1 个答案: