Question

我正在编写一个小型数据库查询应用程序。

我想要做的事情：每次点击一个复选框时，我都希望查询包含要生成的选定字段并插入到textarea中。

问题：出于某种原因，每次点击都会显示上一次点击事件的查询，而不是当前点击事件。

这是标记：

<div class="application container" ng-controller="OQB_Controller">

        <!-- top headr -->
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse shadow" role="navigation">
            <a class="navbar-brand">
                Algebraix Database Client
            </a>

            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href="" class="queries-clear">Clear Queries</a></li>-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-import"></span> Load Data <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="btn-data-import-default">Default Data</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#dataImport">Custom Import</a></li>
                        <!-- <li class="divider"></li> -->
                    </ul>
                </li>

                <li>
                    <a href="" class="queries-clear">
                        <span class="glyphicon glyphicon-remove"></span> Clear Queries
                    </a>
                </li>
            </ul>
        </nav>


        <!-- left column -->
        <div class="col-md-4">
            <div class="well form-group">
                <ul>
                    <li ng-repeat="option in options">
                        <input type="checkbox" class="included-{{option.included}}" value="{{option.value}}" ng-click="buildQuery()" ng-model="option.included"> {{option.text}}
                    </li>
                </ul>
            </div>
        </div>

        <!-- right column -->
        <div class="col-md-8">
            <form role="form" id="sparqlForm" method="POST" action="" class="form howblock">
                <div class="form-group">
                    <!--<label>Query</label>-->
                    <textarea type="text" name="query" class="form-control" rows="10" placeholder="Write your SPARQL query here">{{query}}</textarea>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="Submit Query" data-loading-text="Running Query..." />
                </div>
            </form>
        </div>

</div>

在我的控制器中，我正在做以下事情：

var OQB_Controller = function($scope) {
    console.log('OQB_CONTROLLER');

    $scope.query = 0;

    $scope.options = [
        { text: "checkbox1", value: "xyz123", included: false }
        ,{ text: "checkbox2", value: "abcRRR", included: false }
        ,{ text: "checkbox2", value: "abcRRR", included: false }
    ];

    $scope.buildQuery = function() {
        console.log('click');
        var lines = [];
        lines.push("SELECT *");
        lines.push("WHERE {");
        lines.push(" ?s ?p ?o .");
        for(var i = 0; i<$scope.options.length; i++) {
            var line = $scope.options[i];
            console.log( line.value, line.included, i );
            if( line.included ) {
                lines.push("  OPTIONAL { ?s "+line.value+" ?o } .");
            }
        }
        lines.push("}");
        lines.push("LIMIT 10");
        var _query = lines.join("\n");
        $scope.query = _query;
    };

};

重申一下，每次调用构建查询方法时，included布尔值的状态都来自之前的一次点击事件。这有keyup vs keydown和事件状态的经典javascript问题的症状......但是，我不确定这是不是这里发生了什么。

有没有更好的方法来构建查询（比我目前正在做的那样）并根据选中的框填充textarea？

Answer 1

使用ng-change代替ng-click，因为它更适合此特定的所需行为。请参阅下面的ng-change文档：

只有在输入发生变化时才会评估ngChange表达式   value会将新值提交给模型。

不会评估：

如果从$ parsers转换管道返回的值有   如果输入自模型以来继续无效，则不会更改   如果模型以编程方式更改而不是由a更改，则将保持为null   更改为输入值

如何基于其他表单元素更新文本字段

1 个答案: