Angular js Filter funktioniert nicht?

Bitte sehen Sie die Ausgabe und geben Sie den Grund, warum funktioniert es so? Ich versuche, den Filter für verschachtelte Werte zu verwenden und Filter gibt zufällige Ausgabe.Angular js Filter funktioniert nicht?

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="namesCtrl"> 

<p>Type a letter in the input field:</p> 

<ul> 
    <li ng-repeat="x in names | filter:x.na.foo=0"> 
    {{ x.name }} {{x.na.foo}} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [  
     {name :'Jani' , sName : 0, na :{foo : 0} }, 
     {name :'Carl' , sName : 1 , na :{foo :1}}, 
     {name :'Margareth' , sName : 0 , na :{foo : 1}}, 
     {name :'Hege' , sName : 0, na :{foo : 0} }, 
     {name :'Joe' , sName : 0 , na :{foo : 1}}, 
     {name :'Gustav' , sName : 1, na :{foo : 0} }, 
     {name :'Birgit' , sName : 1 , na :{foo : 1}}, 
     {name :'Mary' , sName : 0 , na :{foo : 0}}, 
     {name :'Kai' , sName : 0, na :{foo : 1} } 
    ]; 
}); 
</script> 

<p>The list will only consists of names matching the filter.</p> 


</body> 
</html>

und der Ausgang ist:

Geben Sie einen Buchstaben in das Eingabefeld:

Jani 0 
Margareth 1 
Hege 0 
Joe 1 
Gustav 0 
Mary 0 
Kai 1 
The list will only consists of names matching the filter.

Quelle

2017-03-21 DEV1205

den Filter wie folgt verwenden, wenn Sie verschachtelte Objekte

Filterung werden

<li ng-repeat="x in names | filter: {na: {foo: 0}}">

Demo

angular.module('myApp', []).controller('namesCtrl', function($scope) { 
 
    $scope.names = [  
 
     {name :'Jani' , sName : 0, na :{foo : 0} }, 
 
     {name :'Carl' , sName : 1 , na :{foo :1}}, 
 
     {name :'Margareth' , sName : 0 , na :{foo : 1}}, 
 
     {name :'Hege' , sName : 0, na :{foo : 0} }, 
 
     {name :'Joe' , sName : 0 , na :{foo : 1}}, 
 
     {name :'Gustav' , sName : 1, na :{foo : 0} }, 
 
     {name :'Birgit' , sName : 1 , na :{foo : 1}}, 
 
     {name :'Mary' , sName : 0 , na :{foo : 0}}, 
 
     {name :'Kai' , sName : 0, na :{foo : 1} } 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="namesCtrl"> 
 

 
<p>Type a letter in the input field:</p> 
 

 
<ul> 
 
    <li ng-repeat="x in names | filter: {na: {foo: 0}}"> 
 
    {{ x.name }} {{x.na.foo}} 
 
    </li> 
 
</ul> 
 

 
</div> 
 

 
    
 

 
<p>The list will only consists of names matching the filter.</p> 
 

 

 
</body> 
 
</html>

Quelle

2017-03-21 11:32:02

Durch Controller:

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    
 
    $scope.names = [  
 
     {name :'Jani' , sName : 0, na :{foo : 0} }, 
 
     {name :'Carl' , sName : 1 , na :{foo :1}}, 
 
     {name :'Margareth' , sName : 0 , na :{foo : 1}}, 
 
     {name :'Hege' , sName : 0, na :{foo : 0} }, 
 
     {name :'Joe' , sName : 0 , na :{foo : 1}}, 
 
     {name :'Gustav' , sName : 1, na :{foo : 0} }, 
 
     {name :'Birgit' , sName : 1 , na :{foo : 1}}, 
 
     {name :'Mary' , sName : 0 , na :{foo : 0}}, 
 
     {name :'Kai' , sName : 0, na :{foo : 1} } 
 
    ]; 
 
    
 
    $scope.foofilter = function(data) { 
 
     return data.na.foo === 0 ; 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    
 
    <p>Type a letter in the input field:</p> 
 

 
<ul> 
 
    <li ng-repeat="x in names | filter: foofilter"> 
 
    {{ x.name }} {{x.na.foo}} 
 
    </li> 
 
</ul> 
 

 
    </body> 
 

 
</html>

Quelle

2017-03-21 11:34:50 Sajal

ich haben Sie zwei Code ein zu filtern und ein auf Bestellung durch,

SortiertNach

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="namesCtrl"> 

<input type="text" ng-model="search"/> 

<ul> 
    <li ng-repeat="x in names | orderBy:'-na.foo'" "> 
    {{ x.name }} {{x.na.foo}} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [  
     {name :'Jani' , sName : 0, na :{foo : 0} }, 
     {name :'Carl' , sName : 1 , na :{foo :1}}, 
     {name :'Margareth' , sName : 0 , na :{foo : 1}}, 
     {name :'Hege' , sName : 0, na :{foo : 0} }, 
     {name :'Joe' , sName : 0 , na :{foo : 1}}, 
     {name :'Gustav' , sName : 1, na :{foo : 0} }, 
     {name :'Birgit' , sName : 1 , na :{foo : 1}}, 
     {name :'Mary' , sName : 0 , na :{foo : 0}}, 
     {name :'Kai' , sName : 0, na :{foo : 1} } 
    ]; 
}); 
</script> 

<p>The list will only consists of names matching the filter.</p>

Filter

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="namesCtrl"> 

<input type="text" ng-model="search"/> 

<ul> 
    <li ng-repeat="x in names | filter:search"> 
    {{ x.name }} {{x.na.foo}} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [  
     {name :'Jani' , sName : 0, na :{foo : 0} }, 
     {name :'Carl' , sName : 1 , na :{foo :1}}, 
     {name :'Margareth' , sName : 0 , na :{foo : 1}}, 
     {name :'Hege' , sName : 0, na :{foo : 0} }, 
     {name :'Joe' , sName : 0 , na :{foo : 1}}, 
     {name :'Gustav' , sName : 1, na :{foo : 0} }, 
     {name :'Birgit' , sName : 1 , na :{foo : 1}}, 
     {name :'Mary' , sName : 0 , na :{foo : 0}}, 
     {name :'Kai' , sName : 0, na :{foo : 1} } 
    ]; 
}); 
</script> 

<p>The list will only consists of names matching the filter.</p>

Bitte die man verwenden, die Sie

helfen würde,

Quelle

2017-03-21 11:37:26

Angular js Filter funktioniert nicht?

Antwort

Verwandte Themen