有一个以 id 作为键值的对象。
示例:
friends = {
1:{name:'John', age:25, gender:'boy'},
2:{name:'Jessie', age:30, gender:'girl'},
3:{name:'Johanna', age:28, gender:'girl'},
4:{name:'Joy', age:15, gender:'girl'},
5:{name:'Mary', age:28, gender:'girl'},
6:{name:'Peter', age:95, gender:'boy'},
7:{name:'Sebastian', age:50, gender:'boy'},
8:{name:'Erika', age:27, gender:'girl'},
9:{name:'Patrick', age:40, gender:'boy'},
10:{name:'Samantha', age:60, gender:'girl'}
};
在ng-repeat中的 friend 想用输入的ng-model过滤年龄
完整代码如下:
(function(angular) {
'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) {
$scope.friends = {
1:{name:'John', age:25, gender:'boy'},
2:{name:'Jessie', age:30, gender:'girl'},
3:{name:'Johanna', age:28, gender:'girl'},
4:{name:'Joy', age:15, gender:'girl'},
5:{name:'Mary', age:28, gender:'girl'},
6:{name:'Peter', age:95, gender:'boy'},
7:{name:'Sebastian', age:50, gender:'boy'},
8:{name:'Erika', age:27, gender:'girl'},
9:{name:'Patrick', age:40, gender:'boy'},
10:{name:'Samantha', age:60, gender:'girl'}
};
});
})(window.angular);
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/.example-animate-container {
background:white;
border:1px solid black;
list-style:none;
margin:0;
padding:0 10px;
}
.animate-repeat {
line-height:30px;
list-style:none;
box-sizing:border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:30px;
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-repeat-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
<script src="https://code.angularjs.org/snapshot/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="searchAge.age" placeholder="filter friends..." aria-label="filter friends" />
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li class="animate-repeat" ng-if="results.length === 0">
<strong>No results found...</strong>
</li>
</ul>
</div>
</body>
</html>
<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->最佳答案
我已经更改了您的 Controller 和输入的 ng-model 中的一些代码。您应该为 ng-repeat 使用数组。检查这个，希望它会有所帮助
(function(angular) {
'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope,$filter) {
$scope.friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
})(window.angular);
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/.example-animate-container {
background:white;
border:1px solid black;
list-style:none;
margin:0;
padding:0 10px;
}
.animate-repeat {
line-height:30px;
list-style:none;
box-sizing:border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:30px;
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-repeat-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
<script src="https://code.angularjs.org/snapshot/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="age" placeholder="filter friends..." aria-label="filter friends" />
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:age">
{{$index + 1}} {{friend.name}} who is {{friend.age}} years old.
</li>
<li class="animate-repeat" ng-if="results.length === 0">
<strong>No results found...</strong>
</li>
</ul>
</div>
</body>
</html>
<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->关于javascript - Angularjs ng-repeat with Object key value filter ng-model name 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44515502/