Question

我有一个可以很好地显示学生名单的应用程序。当您单击每个名称时，它将显示有关该特定学生的更多信息。但是，如果我通过选择选项或搜索更改名称的顺序，则会显示错误的学生信息。这是我的观点：

<input type="text" ng-model="expression" placeholder="Search Student" />
<div class="select">
<span>Sort By: &nbsp;</span>
<select ng-model="order" ng-show="students.length > 0">
    <option selected value="name">Name A-Z</option>
    <option value="-name">Name Z-A</option>
    <option value="room">Room (first to last)</option>
    <option value="-room">Room (last to first)</option>           
</select>
</div>
<div ng-repeat="student in students | orderBy: order | filter:expression">        

<div class="info">
    <div class="img">
        <img ng-src="{{student.image}}">
    </div>
    <h2 style="color: #007acc;"> Student Details For:</h2>
    <hr>
    <h2>{{student.name}}</h2>
    <a ng-href="#!/students/{{$index}}"><button>View Student 
    Details</button></a>
    </div>
    </div>

这是我的Js：

var data = [
{
    name: "Andrea Toe",
    sex: "Female",
    room: 12,
    cell: "076 861 6184",
    image: "images/female.jpg",
    checkin: "June 2016"
},
{
    name: "John Doe",
    sex: "Female",
    room: 3,          
    cell: "063 961 7190",
    image: "images/lebo.jpg",
    checkin: "01 Feb 2018"      
},
{
    name: "James Drew",
    sex: "Male",
    room: 1,
    cell: "076 910 3069",
    image: "images/male.jpeg",
    checkin: "01 Feb 2018"
 }
];
app.controller("studentsCtrl", function($scope){
$scope.students = data;
});
app.controller('studentInfoCtrl', ['$scope', '$routeParams', 
function($scope, $routeParams) {
  $scope.info = data[$routeParams.id];
}]);

即使使用搜索过滤器或使用oderBy重新排序后，如何显示正确的信息？

Answer 1

这是因为在创建指向“学生详细信息”的链接时，您使用了$index范围变量。

此$index由ng-repeat指令引入，表示：

重复元素的迭代器偏移量（0..length-1）

（来自documentation linked here）

简而言之，$index用于在建立指向其详细信息页面的相应链接时唯一标识学生的情况，完全取决于其在页面中的位置。它根本无法识别资源本身！

您可以做的是为每个学生分配一个id属性以及他们的姓名，性别等，如下所示：

var data = [{
    id: 0,
    name: "Andrea Toe",
}, {
    id: 1,
    name: "John Doe",
}, {
    id: 2,
    name: "James Drew",
}];

只需在您创建的网址中引用该新引入的属性即可！

<a ng-href="#!/students/{{ student.id }}"><button>View Student Details</button></a>

Answer 2

搜索和排序对我来说很好：请检查-

var data = [{
    id: 1,
    name: "Andrea Toe",
    sex: "Female",
    room: 12,
    cell: "076 861 6184",
    image: "images/female.jpg",
    checkin: "June 2016"
  },
  {
    id: 2,
    name: "John Doe",
    sex: "Female",
    room: 3,
    cell: "063 961 7190",
    image: "images/lebo.jpg",
    checkin: "01 Feb 2018"
  },
  {
    id: 3,
    name: "James Drew",
    sex: "Male",
    room: 1,
    cell: "076 910 3069",
    image: "images/male.jpeg",
    checkin: "01 Feb 2018"
  }
];
app = angular.module("myapp", []);
app.controller("studentsCtrl", function($scope) {
  $scope.students = data;
});
app.controller('studentInfoCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.info = data.filter(function(d){
      return d.id == $routeParams.id;
    })[0];
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>

<div ng-app="myapp" ng-controller="studentsCtrl">

  <input type="text" ng-model="expression" placeholder="Search Student" />
  <div class="select">
    <span>Sort By: &nbsp;</span>
    <select ng-model="order" ng-show="students.length > 0">
      <option selected value="name">Name A-Z</option>
      <option value="-name">Name Z-A</option>
      <option value="room">Room (first to last)</option>
      <option value="-room">Room (last to first)</option>
    </select>
  </div>
  <div ng-repeat="student in students | filter:expression | orderBy: order ">

    <div class="info">
      <!-- <div class="img">
        <img ng-src="{{student.image}}">
      </div> -->
      <h2 style="color: #007acc;"> Student Details For:</h2>
      <hr>
      <h2>{{student.name}}</h2>
      <a ng-href="#!/students/{{student.id}}"><button>View Student 
    Details</button></a>
    </div>
  </div>
</div>

使用orderby过滤器AngularJS

2 个答案: