javascript - 根据输入模型过滤列表并在 Angular 中选择

Question

根据这个jsbin我有一个输入和一个选择选项以及一个电影列表。我希望当用户在输入中输入内容然后在选择中选择一个选项时，Angular 会过滤电影列表。

<div ng-controller="myController">
<input type="text" ng-model="search"/>
<select>
  <option ng-repeat="item in dropdown" value="{{item}}">{{item}}</option>
</select>

<br/>
<ul>
  <li ng-repeat="movie in movies">
    Name: <strong>{{movie.name}}</strong> |
    director: <strong>{{movie.director}}</strong> |
     actor: <strong>{{movie.actor}}</strong>

  </li>
</ul>

我的 Controller 是这样的:

var myApp = angular.module('myApp',[]);
myApp.controller('myController',function myController($scope){

$scope.dropdown = ['name','director','actor'];

$scope.movies = [

{name:'test',director:'test di',actor:'test ac'},
 {name:'test2',director:'test2 di',actor:'test2 ac'},
 {name:'test3',director:'test3 di',actor:'test3 ac'},
 {name:'test4',director:'test4 di',actor:'test4 ac'}
];
});

Answer 1

您需要在电影列表的 ng-repeat 中有一个过滤器对象。文档在这里:http://docs.angularjs.org/api/ng/filter/filter .

<li ng-repeat="movie in movies | filter:filterObj">

由于对象是动态的，我只能考虑在输入/选择发生变化时生成它。

$scope.changeFilter = function () {
  $scope.filterObj = {};
  $scope.filterObj[$scope.item] = $scope.search;  
};

除非可以查看和编辑代码，否则您的 jsbin 毫无用处。这是一个工作 fiddle