0

我是 angularjs 的新手，所以请耐心等待 ^^ 我正在玩 angularjs。如何动态设置搜索模式？我试过这段代码没有运气:(

<html>
    <head>
        <meta charset="utf-8">
        <title>Binding</title>
    </head>
    <body>
        <div data-ng-app="myApp">
            <input type="text" data-ng-model="{{mysearch}}" />
            <select data-ng-model="mysearch">
                <option value="search.$">All</option>
                <option value="search.name">Name</option>
                <option value="search.email">Email</option>
            </select>
            <span>{{mysearch}}</span>
            <div data-ng-controller="MyCtrl">  
                <table>
                    <tr data-ng-repeat="actor in rows.cast | filter:search">
                        <td>{{actor.name}}</td>
                        <td>{{actor.email}}</td>
                    </tr>
                </table>
            </div>
        </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
       var myAppModule = angular.module('myApp',[]);
       myAppModule.factory('Avengers',function(){
           var Avengers = {};
           Avengers.cast = [{name:'joe',email:'joe@mysite.com'},{name:'david',email:'david@mysite.com'},{name:'charles',email:'charles3@mysite.com'}]
           return Avengers;
       });
       function MyCtrl($scope,Avengers){
          $scope.rows = Avengers;
       } 

    </script>
    </body>
</html>
4

2 回答 2

0

我解决了:)

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="AvengersCtrl">
            <select ng-model="mysearch" ng-change="change()">
            <option value="$">All</option>
            <option value="name">Name</option>
            <option value="character">Character</option>
        </select>
            <input type="text" ng-model="search[filter]">
            <table>
                <tr ng-repeat="actor in avengers.cast | filter:search">
                    <td>{{ actor.name }}</td>
                    <td>{{ actor.character }}</td>
                </tr>
            </table>
        </div>
    </div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    var myApp = angular.module('myApp', []);
    myApp.factory('Avengers', function () {
        var Avengers = {};
        Avengers.cast = [
            {name: 'Fabio',character: 'superman'},
            {name: 'whisher',character: 'spiderman'}
        ];
        return Avengers;
    });
    function AvengersCtrl($scope, Avengers) {
        $scope.filter = "name";
        $scope.search = {name:'', character:'', $:''};
        $scope.avengers = Avengers;
        $scope.change = function(){
            $scope.filter = $scope.mysearch;
        }
    }
</script>
</body>
</html>

非常感谢@lopisan angularjs：动态更改过滤器选项

于 2013-08-10T16:55:31.393 回答
0

文档是这样说的：

http://docs.angularjs.org/api/ng.filter:filter

参数 array - {Array} - 源数组。表达式 - {string|Object|function()} - 用于从数组中选择项目的谓词。可以是以下之一： 字符串：使用表达式字符串的值导致子字符串匹配的谓词。将返回数组中包含该字符串的所有字符串或具有字符串属性的对象。谓词可以通过在字符串前面加上 ! 来否定。

对象：模式对象可用于过滤数组包含的对象的特定属性。例如 {name:"M", phone:"1"} 谓词将返回属性名称包含“M”和属性 phone 包含“1”的项目数组。可以使用特殊的属性名称 $（如 {$:"text"}）来接受与对象的任何属性的匹配。这相当于上面描述的与字符串的简单子字符串匹配。

函数：谓词函数可用于编写任意过滤器。为数组的每个元素调用该函数。最终结果是谓词返回 true 的那些元素的数组。

您可能应该有 2 个输入字段，一个用于姓名，一个用于电子邮件，然后将一个对象传递给与您的数据模型中的字段、姓名和电子邮件相对应的过滤器。

您还可以编写自定义过滤器，它们实际上非常简单。

于 2013-07-12T14:51:11.907 回答