Skip to content Skip to sidebar Skip to footer

Angularjs Ng-repeat Filter By Id

hi i have 2 tables in mysql, i call the data with php(mysqli), so i put this data in javascript var with $scope.student= ; and $scope.ra

Solution 1:

You can use $filter please see demo below

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>

Solution 2:

<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>

Solution 3:

Here is the actual way to do inline filtering on a property:

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

However note that is is more performant to pre-filter your result list, so in your controller you would put

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

So your html would only be:

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

Finally, I'm not very comfortable with php but it sounds like a weird way to populate your model. You should do it in the actual javascript file and not within your HTML.


Post a Comment for "Angularjs Ng-repeat Filter By Id"