Как обновить текстовое поле на основе других элементов формы

Question

Я пишу небольшое приложение для запроса базы данных.

Что я пытаюсь сделать: Каждый раз, когда нажимается флажок, я хотел бы получить запрос, который включает в себя выбранные поля, которые будут сгенерированы и вставлены в текстовое поле.

Проблема: По какой-то причине каждый щелчок показывает запрос из предыдущего события клика, а не текущего.

Вот разметка:

<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 booleans - это событие с одним щелчком мыши. это имеет симптомы классической проблемы с javascript для keyup vs keydown и состояния события ... однако я не уверен, что это то, что здесь происходит.

Есть ли лучший способ сделать запрос (чем я сейчас делаю) и заполнить текстовое поле на основе отмеченных ящиков?

Answer 1

использовать ng-change вместо ng-click, поскольку он более подходит для этого конкретного желаемого поведения. См ng-change документации ниже:

Выражение ngChange вычисляется только при изменении значения входного вызывает новое значение, которое будет совершено в модели.

Это не будет оцениваться:

, если возвращаемое значение из трубопровода $ парсеров трансформации не изменяется, если вход продолжает быть недействительным, так как модель останется нулевым значением, если модель изменяется программно и а не изменение на входное значение