JSON 填充的表单元素不使用 angularJs 过滤器进行过滤

JSON populated form elements not filtering using angularJs filter

本文关键字：过滤器 angularJs 过滤 填充 表单 元素 JSON      更新时间：2023-09-26

select元素确实由http请求填充，但select元素中的选项不会随着ng-model的更改而更新。 我是 angularJs 的新手，所以我假设这是一个简单的修复。我尝试了许多变化，但没有积极的结果。

    <script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {    
$http.get('http://graph.facebook.com/platform')
.success(function(data) {
})
        });
</script>
<body ng-controller="MainCtrl">
  Search:
  <input type="search" ng-model="searchText" />
  <select>
    <option ng-repeat="item in data | filter: searchText">{{item}}</option>
  </select>
  <br>
     <pre>{{ data | json}}</pre>
</body>

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

TarranJones，这个Plunker应该把事情弄清楚了。如果不查看您的数据，很难给您 100% 明确的答案。你应该能够从这里弄清楚。

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

为了在评论中回答您的问题，我将替换：

app.controller('MainCtrl', function($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
});

跟： 

app.controller('MainCtrl', function($scope, $http) {
  $http.get('http://www.foo.com')
  .success(function(data) {
    $scope.colors = data;
  })
  .error(function() {
    console.log('My name is Error, now eat it!);
  });
});

确保注入$http。

在这里，http://plnkr.co/edit/UYm0SwtU6ePZkZLx2w2U?p=preview

更新：

Tarran还遇到了从API过滤单个返回的JSON对象的问题。角度过滤器只能接受数组，因此不接受对象。为了让 Tarran 过滤对象，他必须首先遍历对象并将对象属性存储到数组中。然后将数组返回到$scope后，您可以过滤结果。下面提供了 plunker 和代码： http://plnkr.co/edit/9M3zZFN5jyV8w7fg7EE3?p=preview

控制器：

$http.get（'http：//graph.facebook.com/4'） .success（function（data） {

    //CREATE AN EMPTY ARRAY 
    result = [];
    //ITERATES THROUGH THE OBJECT SAVING THE OBJECTS PROPERTIES TO ARRAY
    for (var i in data) {
      if (data.hasOwnProperty(i)) {
          //PUSHES THE PROPERTIES ONTO THE ARRAY
          result.push(data[i]);
      }
    }
    //SETS THE NEW DATASET TO THE ARRAY AND RETURNS TO $SCOPE
    $scope.dataset = result;
});

.HTML：

  {{dataset}}
  <BR>
  <BR>Search:

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

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

尝试先将数据初始化为对象。

$scope.data = {}

或在 HTML 中：

<div ng-controller="FetchCtrl" data-ng-init="data={}; fetch()">
相关文章：