1

私はAngularJSが初めてで、その中でいくつかのことを始めたばかりです。

私は非常に基本的な疑問を持っています、

プログラム番号 : 1

<body data-ng-app data-ng-init="nodes=[{name: 'T', age: 25},{name: 'A', age: 26},{name: 'R', age:27}]">
    <div  />

    Filter of the data : {{names}} 
    <br>
    <input type="text" data-ng-model="filtername"> {{filtername}}
    <br>

    <hr>
    <ul>
        <li data-ng-repeat="node in nodes| orderBy: 'name' | filter: filtername">{{node.name|uppercase}} - {{node.age}}</li>
    </ul>

    <script type="text/javascript" src="scripts/angular/angular.js"></script>
</body>

このプログラムは、本来の動作方法でフィルタを使用しています。

プログラム番号 : 2

<div data-ng-controller="Controller_Contact_View">

    Name:<input type="text" data-ng-model="name" />
    Email:<input type="text" data-ng-model="email" />
    <button data-ng-click="add()">Add</button>

    <hr>
    Search on Name:<input type="text" data-ng-model="searchName" />{{searchName}}

    <h2>Contacts</h2>
    <ul>
        <li data-ng-repeat="contact in contacts| orderBy: 'getName()'| filter: searchName"><b>{{ contact.getName() }}</b> - <a href="mailto:{{contact.getEmail()}}">{{contact.getEmail()}}</a></li>
    </ul>

</div>

<script type="text/javascript" src="scripts/angular/angular.js"></script>

<script>
    function Controller_Contact_View($scope) {

         $scope.contacts = new Array();
        //var contacts = ;\

        var c = new Contact('A', 'email_' + 12 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('R', 'email_' + 1 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('V', 'email_' + 41 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('T', 'email_' + 11 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('K', 'email_' + 10 + '@pkrm.com');
        $scope.contacts.push(c);

        $scope.add= function(){
            var n = $scope.name;
            var e = $scope.email;
            var c = new Contact(n, e);
            $scope.contacts.push(c);
            $scope.name = $scope.email = "";
        };
    }
</script>

<script>

    var Contact = function(name, email){

        this.name = name;
        this.email = email;

        return({
            getName : function(){
                return name;
            },
            getEmail : function(){
                return email;
            },
            setName : function(n){
                name = n;
            },
            setEmail : function(e){
                email = e;
            }
        });
    };

</script>

どちらも同じですが、プログラム No 2 でフィルターが機能していません。

どこに問題があるのか​​、それを明らかにしてください

4

2 に答える 2

2

値を返すが値のリストを返さないメソッドのリストがあるために発生すると思います。を出力すると<pre>{{contacts|json}}</pre>、空のリストが得られます。したがって、それを機能させるには、次のようなカスタム フィルターを使用します。

.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];
    console.log(types);

       if(types === undefined || types == ''){return items;}

    angular.forEach(items, function(item) {        
        if(item.getName() == types){        
          filtered.push(item);   
        }
    });

    return filtered;
  };
});

そしてHTML：

<li data-ng-repeat="contact in contacts| orderBy: 'getName()'| myfilter:searchName">

デモFiddle

于 2013-11-08T07:56:11.147 に答える