在 ng-repeat 中写入条件答案

【问题标题】：writing conditions within ng-repeat在 ng-repeat 中写入条件
【发布时间】：2017-01-12 22:01:50
【问题描述】：

我刚开始学习 Angular JS，我正在准备一个测试库系统，并且对 ng-repeat 有一个小问题

我有 2 张桌子。一个存储有关书籍的详细信息，另一个存储借书的学生。

表 1-book_id, book_name, borrowed, student_id

表 2 - book_id, student_ name, student_id

有 2 个单独的函数从上面的每个表中获取所有详细信息。

下面的代码显示了从第一个表中抓取的所有书籍

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

我想做的是

If  borrowed == 1

更改 class="not_available" 并将 student_name 和 book_name 添加到需要从包含学生详细信息的学生中获取的 div 中。

JS 代码

 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; });
 }

我确实尝试了filter 和ng-if，但我无法实现上述目标

任何帮助将不胜感激

【问题讨论】：

你也可以发布你的javascript吗？您在 book 对象中有哪些信息？要更改您使用 ng-class 的类。将class="available" 替换为ng-class="book.borrowed == 1 ? 'not_available' : 'available'"
@Razzildinho 图书对象具有`id、book_name、借用、student_id` 详细信息....我试试 ng-class 的东西 :)
查看我的答案

标签： angularjs

【解决方案1】：

如果你有两个数组

第一个是books 为：book_id, book_name, borrowed, student_id
第二个是students 为：book_id, student_ name, student_id

然后按照下面的方法来实现你的概念（只要把它作为一个关键）

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

【讨论】：

谢谢.. 我试试看 :) 顺便问一下，** 是什么意思？
别介意。我试着加粗到那条线。删除它

【解决方案2】：

我会将所有内容放在一个控制器中，以避免必须从另一个控制器中引用。

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

然后你的 html 会是这样的：

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

【讨论】：

谢谢...你能告诉我book.book_name + book.borrowed == 1是什么意思吗？
@LiveEn 这是一段 javascript，用于显示书名 (book.book_name)，后跟 ternary operator，如果书被借，则显示学生的姓名，如果没有，则显示空字符串 ( book.borrowed == 1 ? getBookBorrowerName(book) : '')
啊好的...谢谢...只是一个错误...当我运行它时SyntaxError: missing ) after for-loop control for (var s=0; s<$scope.students.length; s++;)知道为什么吗？

【解决方案3】：

希望对你有帮助

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>

【讨论】：