Angularjs ng-repeat filter by id

Angularjs ng-repeat filter by id

本文关键字：id by filter ng-repeat Angularjs      更新时间：2023-09-26

嗨，我在 MySQL 中有 2 个表，我用 php（mysqli） 调用数据，所以我把这些数据放在 JavaScript var 中，$scope.student= <?php echo json_encode( $student) ?>; 和 $scope.ratings= <?php echo json_encode( $ratings) ?>; 2 个表有一个键 ID（ID_studen）

第一个表只有一个个人数据，第二个表有 datails，所以我需要通过这里的评级过滤和显示所有详细信息 代码：

<div ng-app="" ng-controller="Ctrl">
  <ul ng-repeat="student in students">
   <li ng-repeat="rating in ratings (where student.tagid =ratings.tagid">  {{rating.note}}</li>
  </ul>
</div>

检查 jsfiddle.net

您可以使用

$filter请参阅下面的演示

app = angular.module("app", []);
app.controller("Ctrl", Ctrl);
function Ctrl($scope) {
  $scope.students = [{
    firstname: 'Buster',
    lastname: 'Bluth',
    tagid: '4134'
  }, {
    firstname: 'John',
    lastname: 'McClane',
    tagid: '9845'
  }, {
    firstname: 'Mister',
    lastname: 'Spock',
    tagid: '0905'
  }];
  $scope.ratings = [{
    matter: 'Mathematics',
    note: '12',
    tagid: '4134'
  }, {
    matter: 'Biology',
    note: '13',
    tagid: '9845'
  }, {
    matter: 'Lenguage:',
    note: '14',
    tagid: '0905'
  }];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <ul ng-repeat="student in students">
    <li ng-repeat="rating in ratings | filter : {tagid: student.tagid}">{{student.firstname}} {{student.lastname}} | {{rating.matter}} {{rating.tagid}}</li>
  </ul>
</div>

<div ng-app="" ng-controller="Ctrl">
    <ul ng-repeat="student in students">
        <li ng-repeat="rating in ratings | { tagid = student.tagid }">{{rating.note}}</li>
    </ul>
</div>

以下是对属性进行内联过滤的实际方法：

<li ng-repeat="rating in ratings | filter: {'tagid': student.tagid}">  {{rating.note}}</li>

但是请注意，预过滤结果列表的性能更高，因此在控制器中，您将放置

$scope.filteredRatings = $scope.ratings.filter(function(r) {
    return r.tagid === $scope.student.tagid;
});

所以你的html只会是：

<li ng-repeat="rating in filteredRatings">  {{rating.note}}</li>

最后，我对 php 不是很满意，但这听起来像是一种填充模型的奇怪方式。你应该在实际的javascript文件中执行此操作，而不是在HTML中。

相关文章：