1

New to Angular, please help! I've scoured the internet and haven't been able to find an answer that makes sense to my newb brain. This is all using only AngularJS, no typescript or CLI.

I have a list of items in an array. I have a list of options in a second array. I'd like the user to be able to select the options in the second array, and then sort the items in the first array by what was chosen in the second array. And I just cannot figure out how to do this.

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

And my 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"];

I can successfully display listings, and show the drop down for the user to select Have or Get. But how do I then give the user an option to sort by Have or Get, and have the listings sorted by what the user input?

This is probably very simple and I'm just not thinking of it in the right way, so apologies in advance!

georgeawg
  • 48,608
  • 13
  • 72
  • 95
VCYar
  • 13
  • 3
  • This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – georgeawg Jul 30 '18 at 22:14
  • I'm still figuring things out. I only just finished the CodeCademy Angular series. – VCYar Jul 31 '18 at 19:57

1 Answers1

1

you do that by having selectedlstStats as a property in the listings object, something like this:

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

and for sorting you can use that property to sort the list, just like this:

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

in the next link is an example of my idea:

Example Here

MorenajeRD
  • 849
  • 1
  • 11
  • 27