从$ http过滤动态生成的选项

时间:2013-12-18 16:36:41

标签: javascript angularjs

我试图找出为什么在从$http动态生成时无法过滤选择内容的原因。在提供的plunker中,我可以在提供测试数据集时进行过滤,但是当我从$ http请求中检索数据时,select不会过滤。

http://plnkr.co/edit/lmBRIvfZQogS4LTx2FYV?p=preview

这是我的控制器:

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

app.controller('MainCtrl', function($scope, $http) {

    $http.get('http://graph.facebook.com/4')
      .success(function(data) {
        $scope.dataset = data;
      })
      .error(function() {
          console.log('My name is Error, now eat it!');
      });

    // TEST DATASET
    // $scope.dataset = [
    //   {name:'black', shade:'dark'},
    //   {name:'white', shade:'light'},
    //   {name:'red', shade:'dark'},
    //   {name:'blue', shade:'dark'},
    //   {name:'yellow', shade:'light'}
    // ];

}); 

这是我的HTML:

<body ng-controller="MainCtrl">

  Search:
  <input type="search" ng-model="searchText" />


  <BR>
  <BR>

  <select>
    <option ng-repeat="data in dataset | filter: searchText">{{data}}</option>
  </select>
</body>

1 个答案:

答案 0 :(得分:1)

过滤数组中项目的过滤器。从服务返回的是单个对象

{ "id": "4", "name": "Mark Zuckerberg", "first_name": "Mark", "last_name": "Zuckerberg", "link": "http://www.facebook.com/zuck", "username": "zuck", "gender": "male", "locale": "en_US" }

这是下拉列表,因为我认为下拉列表也支持对象属性。