Question

我正在尝试使用Angular材料自动填充表单。在这里，我想自动填写输入表单。对于要显示的建议，我想显示股票名称和符号的名称。我从以下API获取库存数据：
http://dev.markitondemand.com/MODApis/Api/v2/Lookup/json?input=A

每当我输入一个新的字母时，都会获取新文本并将新文本传递给我的代码中的searchTextChange函数。 searchTextChange函数对一个在后端工作的PHP脚本进行ajax调用。 PHP脚本使用新文本作为参数调用API，并返回API返回的JSON数据。所以，最终我的searchTextChange函数返回JSON数据。我能够将此JSON数据记录到控制台。

现在问题是，我无法将数据显示为建议。我需要做出哪些改变？

这是我的HTML + Angular代码：

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language = "javascript">
          var finalData;
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);function autoCompleteController ($timeout, $q, $log) {
            var self = this; self.isDisabled    = false;
             self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
                var str = text;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                  finalData = this.responseText;
                console.log(finalData);
                return finalData;
            }
        }
        xmlhttp.open("GET", "Auto.php?q="+str, true);
        xmlhttp.send();
    }
    function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }  
         }  
      </script>
   </head>
    <body ng-app = "firstApplication" ng-cloak>
      <div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <p><code>md-autocomplete</code> can be used to provide search results from
               local or remote data sources.</p><md-autocomplete
                  ng-disabled = "ctrl.isDisabled"
                  md-no-cache = "ctrl.noCache"
                  md-selected-item = "ctrl.selectedItem"
                  md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
                  md-search-text = "ctrl.searchText"
                  md-selected-item-change = "ctrl.selectedItemChange(item)"
                  md-items = "item in ctrl.searchTextChange(ctrl.searchText)"
                  md-item-text = "item.symbol"
                  md-min-length = "1"
                  placeholder = "eg.AAPL"> <md-item-template>
                     <span md-highlight-text = "ctrl.searchText"
                        md-highlight-flags = "^i">{{item.symbol}}</span>
                  </md-item-template> <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found. </md-not-found>
               </md-autocomplete>
               <br/>
            </form>
         </md-content>
      </div>
   </body>
</html>

这是我的PHP代码：

<?php
//header("Access-Control-Allow-Origin:*","Content-Type:application/json");
if($_SERVER['REQUEST_METHOD'] == "GET") {
    $q = $_GET['q'];
    // echo "Now process for " .$q;
    $APICall = "http://dev.markitondemand.com/MODApis/Api/v2/Lookup/json?input=".$q;

    $response = file_get_contents($APICall);
    echo $response;


}
else {
    echo "Not get method";
}
?>

这是我得到的输出：

Answer 1

将结果保存在范围内：

   var finalData;
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);function autoCompleteController ($timeout, $q, $log,$scope) {
            var self = this; self.isDisabled    = false;
             self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
                var str = text;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                  finalData = this.responseText;
                console.log(finalData);
                $scope.finalData =  finalData;
                //----^ here
            }
        }
        xmlhttp.open("GET", "Auto.php?q="+str, true);
        xmlhttp.send();
    }
    function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }  
         }

将循环更改为：

md-items = "item in ctrl.finalData"

你应该更好地使用$ http，如：

<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in query(ctrl.searchText)" md-item-text="item.Symbol">
  <md-item-template>
     <span md-highlight-text="searchText">{{item.Symbol + " - " + item.Name + " ("+ item.Exchange +")" }}</span>
  </md-item-template>
</md-autocomplete>

function autoCompleteController($scope, $http) {
  $scope.query = function(searchText) {
    return $http
      .get("Auto.php?q=" + searchText)
      .then(function(data) {
        return data.data;
      });
  };
}

角度材料自动完成

1 个答案: