Question

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

<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>

Answer 1

文档说这个：

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

参数array - {Array} - 源数组。表达 -   {string | Object | function（）} - 用于选择的谓词   数组中的项目。可以是以下之一：string：导致a的谓词   substring匹配使用表达式字符串的值。所有字符串或   包含此字符串的数组中包含字符串属性的对象   被退回可以通过在字符串前加上来否定谓词   ！

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

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

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

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

Answer 2

我解决了这个问题：）

<!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: change filter options dynamically

动态设置搜索模式

2 个答案: