将选定的值传递给控制器​​并在AngularJS中排序

Question

Angular的新手，请帮忙！我搜寻了互联网，却找不到适合我的新大脑的答案。全部都只使用AngularJS，不使用打字稿或CLI。

我有一个数组中的项目列表。我在第二个数组中有一个选项列表。我希望用户能够选择第二个数组中的选项，然后根据第二个数组中选择的内容对第一个数组中的项目进行排序。而且我只是不知道该怎么做。

我的index.html：

<div class="main" ng-controller="MainController">
    <div class="card" ng-repeat="listing in listings | orderBy:'number'">
        <h2 class="title">{{ listing.number }}: {{ listing.title }}</h2>
        <p class="status">
            <select ng-model="selectedlstStats"
                    ng-options="item for item in lstStats">
             </select> <!--This is the drop down where they choose Have or Want-->            
        </p>
    </div>        
    <div class="card">
        <select ng-model="sortlstStats" ng-options="item for item in lstStats">
        </select>
    </div>

还有我的controller.js

app.controller('MainController', ['$scope',  function ($scope) {

$scope.listings = [
     {
         id: '1',
         number: '1',
         title: 'Apples'
     },
     {
         id: '2',
         number: '2',
         title: 'Oranges'
     },
     {
         id: '3',
         number: '3',
         title: 'Bananas'
     },
     {
         id: '4',
         number: '3',
         title: 'Peaches'
     }
],

$scope.lstStats = ["Have", "Get"];

我可以成功显示列表，并显示下拉菜单供用户选择“具有”或“获取”。但是，我该如何为用户提供一个选项，使其可以按Have或Get进行排序，并按照用户输入的内容对列表进行排序？

这可能非常简单，我只是没有以正确的方式考虑它，因此提前致歉！

Answer 1

您可以通过在清单对象中选择lstStats作为属性来做到这一点，就像这样：

 <select ng-model="listing.selectedlstStats" ng-options="item for item in lstStats"></select>

对于排序，您可以使用该属性对列表进行排序，如下所示：

<div class="card" ng-repeat="listing in listings | orderBy:'selectedlstStats'">

在下一个链接中的

是我的想法的示例：

Example Here