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

【问题标题】：Filter list base on input model and select in Angular根据输入模型过滤列表并在 Angular 中选择
【发布时间】：2014-04-13 08:16:28
【问题描述】：

根据这个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>

我的控制器是这样的：

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'}
];
});

【问题讨论】：

标签： javascript angularjs

【解决方案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

【讨论】：