$ http AngularJSでショートカットがうまくいきませんか？

以下のスクリプトでは、自分のコードを煮詰めたバージョンを投稿しました。基本的には簡単な検索エンジンです。

スクリプトは$ scope.list_of_fruit配列をループし、単純なhtml入力テキストボックスに入力されたものに従ってフィルタリングします。

<script> 
var app = angular.module("myapp",[]); 
app.controller("usercontroller", function($scope){ 
     $http 
     .get("test.php") 
     .then(function (response) { 
      $scope.myData = response.data.records; 
     }); 

     $scope.list_of_fruit = ["apple", "banana", "pear", "kiwi"]; 

     $scope.complete = function(boxtext){ 
      var output = []; 
      angular.forEach($scope.list_of_fruit, function(fruit){ 
       if(fruit.toLowerCase().indexOf(boxtext.toLowerCase()) == 0) 
       { 
        output.push(fruit); 
       } 
      }); 
      $scope.filteredfruit = output; 
     } 
}); 
</script>

これは結構な作品が、私はHTTP GETがトップを要求することを貼り付けるとき、それは完全にその$のscope.completeループとは無関係の、$のscope.completeループだけで動作を停止しています。

明らかなものがありませんか？

出典

2017-08-12 master_of_privates

app.controller("usercontroller", function($scope){

$ httpが定義されていないため、JavaScriptエラーが発生している可能性があります。

は、関数のパラメータに$のhttpを追加します。

app.controller("usercontroller", function($scope, $http){

私はスニペットを作成し、これが今

var app = angular.module('myApp', []); 
 

 
app.controller("usercontroller", function($scope, $http){ 
 
     $http 
 
     .get("https://jsonplaceholder.typicode.com/posts") 
 
     .then(function (response) { 
 
     $scope.myData = response.data.records; 
 
     }); 
 

 
     $scope.list_of_fruit = ["apple", "banana", "pear", "kiwi"]; 
 

 
     $scope.complete = function(boxtext){ 
 
      console.log(boxtext); 
 
      var output = []; 
 
      angular.forEach($scope.list_of_fruit, function(fruit){ 
 
       if(fruit.toLowerCase().indexOf(boxtext.toLowerCase()) == 0) 
 
       { 
 
        output.push(fruit); 
 
       } 
 
      }); 
 
      $scope.filteredfruit = output; 
 
     } 
 
});

<!DOCTYPE html> 
 
<html ng-app='myApp'> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script> 
 
    
 
    <div ng-controller="usercontroller as vm"> 
 
    {{list_of_fruit}} 
 
    {{filteredfruit}} 
 
    
 
    <input type="text" ng-model="search"/> 
 
    <button ng-click="complete(search)">Do something</button> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

を動作するように見えます

出典

2017-08-12 08:05:57 user2340824

$ http AngularJSでショートカットがうまくいきませんか？

答えて

関連する問題