使用对象键值过滤ng-model名称的Angularjs ng-repeat不起作用

时间：2017-06-13 07:57:02

标签： javascript html angularjs

让一个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中，朋友希望使用ng-model of input

过滤年龄

以下是完整代码：

＆＃13;
＆＃13; 
(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
*/
＆＃13; 
.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
*/
＆＃13; 
<!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
-->
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

我已经更改了控制器中的一些代码和输入的ng模型。您应该使用数组进行ng-repeat。检查一下，希望它会有所帮助

＆＃13;
＆＃13; 
(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
*/
＆＃13; 
.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
*/
＆＃13; 
<!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
-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

保持相同的数据结构，您可以使用ng-model="searchAge" ng-change="searchFriends()"

过滤自定义函数

为此，您必须保留所有朋友的主列表，并将过滤后的值推送到friends数组中。

最初，设置$scope.friends = angular.copy($scope.allFriends); 

'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) {
  $scope.allFriends = {
    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'
    }
  };

  $scope.friends = angular.copy($scope.allFriends);

  $scope.searchFriends = function() {
    $scope.friends = [];
    angular.forEach($scope.allFriends, function(itm) {
      if (itm.age == $scope.searchAge) {
        $scope.friends.push(itm);
      }
    })

    $scope.friends = $scope.friends.length == 0 ? angular.copy($scope.allFriends) : $scope.friends;
  }
});
.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" ng-change="searchFriends()" 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
-->

答案 2 :(得分：-1)

// Controller Count keys in a Object

$scope.FriendsCount = Object.keys($scope.friends).length;

//Render inside HTML

I have {{FriendsCount}} friends. They are

要更新我有10个朋友.. {{friends.length}}无效。你需要计算一个对象中的键。

相关问题
最新问题