ng-repeat不起作用

时间:2017-04-17 12:34:46

标签: angularjs json

我可以像这样获取数组,我可以在我的控制台上看到它

0 :  Object
1
:
Object
2
:
Object
3
:
Object
4
:
Object
5
:
Object
6
:
Object
7
:
Object
8
:
Object
9
:
Object
10
:
Object
11
:
Object
12
:
Object
13
:
Object
14
:
Object
15
:
Object
16
:
Object
17
:
Object
18
:
Object

并且每个数组都有这样的值,例如第0个数组包含此

0:object
    id :  8726
    name : "aman"
    slug : "aman"
    type  :  "Drug"

Angular js

 $scope.keyup = function (data) {
   $http({
        url: 'myapi?q='+data,
     method: "GET", 
    }).success(function(response){

      $scope.results = response.data;
    });


 $scope.$watch('userInput',function(){
     var key =$scope.$$watchers[0].last;
     $scope.keyup(key) }); //this is because ng-keypress was not working but this is not an issue

HTML

  <a ng-repeat="item in results" ng-href="#">
                <div>{{item.name}}</div>
            </a>

我可以在控制台中看到阵列,但我不知道为什么ng-repeat不起作用

Console screenshot

它的完成.. idk为什么,但解决方案是如此如此糟糕

$scope.results = response.data;
 $rootScope.vars = $scope.results 

4 个答案:

答案 0 :(得分:0)

这可能很傻,你可以这样写,同时从api获得结果,如下所示,

$scope.keyup = function (data) {
    $http({
        url: 'myapi?q='+data,
        method: "GET", 
    }).success(function(response){
      $scope.results = response.data.data;
    });
}
  

注意: 您缺少keyup函数的紧密支撑。 (有一个   复制代码到堆栈时错过的机会。请忽略它是否如此。)

答案 1 :(得分:0)

下面一个可以帮到你。

&#13;
&#13;
var app = angular.module('exApp', []);
  app.controller('Ctrl', ['$scope', '$http', function($scope, $http){  
  $scope.searchMov = "Batman";

         $scope.data = [{'name':'aa','id':1, 'address':'xxx'},{'name':'bb','id':2, 'address':'zzz'},{'name':'cc','id':3, 'address':'aaaa'},{'name':'dd','id':4, 'address':'bbbb'}];
         
   // console.log($scope.data); // see console

$scope.keyup = function () {
    $http({url: 'http://www.omdbapi.com/?s='+$scope.searchMov+'&page=1',
        method: "GET", 
    }).success(function(response){
      $scope.results = response;
    });
};
  function init(){
  $scope.keyup();
  };
  init();
  }]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="Ctrl">
   <div>
     {{data}}<br><br>
     <input type="text" ng-model="search">
    <div ng-repeat="dat in data | filter: search">{{dat.id}} {{dat.name}}   {{dat.address}}</div>   
   </div>
  <br><br> 
  Search Movies Here: <input type="text" ng-model="searchMov" ng-change="keyup()">
  
  <p>{{results.Error}}</p>
   <div ng-repeat="rs in results.Search">
   <div style="padding:2px;margin:2px;border:1px solid #789898"><p>{{rs.Title}} {{rs.Year}}</p>
   <img ng-src="{{rs.Poster}}" style="width:100px;height:100px">
   </div></div>
</body>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

根据提供的ng-repeat,您的JSON代码正常运作。

<强>样本

&#13;
&#13;
var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    var response = [
     {    
       id :  8726,
       name : "aman",
       slug : "aman",
       type  :  "Drug"
     },
     {
       id :  8727,
       name : "aman1",
       slug : "aman1",
       type  :  "Drug1"     
     },
     {
       id :  8728,
       name : "aman2",
       slug : "aman2",
       type  :  "Drug2"     
     },
     {
       id :  8729,
       name : "aman3",
       slug : "aman3",
       type  :  "Drug3"     
     }
    ];
    
    $scope.results = response;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <a ng-repeat="item in results" ng-href="#">
      <div>{{item.name}}</div>
  </a>
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:-1)

使用跟踪

<a ng-repeat="item in $scope.results track by $index" ng-href="#">
            <div>{{item.name}}</div>
        </a>

<a ng-repeat="item in $scope.results track by item.id" ng-href="#">
            <div>{{item.name}}</div>
        </a>