CODEWITHSUNDEEP
angularjs
LiveEn
LiveEn

Reputation: 3253

writing conditions within ng-repeat

I just started to learn Angular JS and im preparing a test library system and have a small issue with the ng-repeat

I have 2 tables. One stores details about books and the other is the student who has borrowed the book.

Table 1- book_id, book_name, borrowed, student_id

Table 2 - book_id, student_ name, student_id

There are 2 separate functions that take all the details from each of the above tables.

Below code which shows all the books which is grabbed from the first table

<div class=”available” ng-repeat="book in books">{{book.book_name}}</div>

What Im trying to do is

If  borrowed == 1

Change the class="not_available" and add the student_name and the book_name inside the div which needs to be grabbed from student which has the student details.

JS Code

 function studentsController($scope,$http) {
     $scope.students = [];
     $http.get('<?php echo site_url('angularjs/get_students'); ?>').success(function($data){ $scope.students=$data; });
 }

  function booksController($scope,$http) {
     $scope.books = [];
     $http.get('<?php echo site_url('angularjs/get_books'); ?>').success(function($data){ $scope.books=$data; });
 }

I did try the filter and ng-if, but I was unable to achieve the above

Any help will be appreciated

Upvotes: 1

Views: 65

Answers (3)

Razzildinho
Razzildinho

Reputation: 2584

I would put it all in one controller to avoid having to reference one from the other.

function libraryController($scope,$http) {
  $scope.students = [];
  $http.get('<?php echo site_url('angularjs/get_students'); ?>').success(function($data){ $scope.students=$data; });

  $scope.books = [];
  $http.get('<?php echo site_url('angularjs/get_books'); ?>').success(function($data){ $scope.books=$data; });

  $scope.getBookBorrowerName = function(book){
    for (var s=0; s<$scope.students.length; s++){
      if (book.student_id == $scope.students[s].student_id){
        return ' - Borrowed by: ' + $scope.students[s].student_name;
      }
    }
  };
}

And then your html would be something like this:

<div ng-repeat="book in books" ng-class="book.borrowed != 1 ? 'available' : 'not_available'">{{book.book_name + book.borrowed == 1 ? getBookBorrowerName(book) : ''}}</div>

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

If you have two array

  • first one is books for : book_id, book_name, borrowed, student_id
  • second one is students for : book_id, student_ name, student_id

then go to this below way to achieve your concepts (just take this as a key)

<div class="available" ng-repeat="book in books">
    {{book.book_name}}
    <div ng-repeat="student in students ">
        <div class="not_available"  ng-show="student.book_id==book.book_id>
          {{book.book_name}} is already purchased by {{student.student_ name}}
        </div>
   </div>
</div>

Upvotes: 1

Pankaj Badukale
Pankaj Badukale

Reputation: 2046

Hope this will help you

angular.module('moduleName')
.controller('ctrName', [function($scope) {
   $scope.books = [......];
   $scope.students = [......];

   $scope.getStuDetailsByBookId = function(book_id, prop) {
     // some login to get student object from students collection
     return studenDetails[prop];
   };
}]);


<div ng-controller="nameController">
   <div ng-repeat="book in books" ng-class="{'not-avail': book.borrowed == 1, 'other' : book.borrowed != 1}">
     <div ng-if="book.borrowed == 1">
      {{getStuDetailsByBookId(book.book_id, 'name')}}
      {{getStuDetailsByBookId(book.book_id, 'id')}}
     </div>
   </div>

</div>

Upvotes: 0

Related Questions