使用表单值创建动态 Link 和 AngularJS

Question

所以我创建了一个非常简单的 HTML 表单，其中包含我想使用 AngularJS 检索的几个字段。使用这些检索到的值，我希望创建一个动态 link（最终将用于创建自定义 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 等...变量。

使用表单值创建动态 Link 和 AngularJS

Using Form Values to Create Dynamic Link with AngularJS

javascript

solr

angularjs