AngularJS Orderby对象键

Question

So, I'm trying to create a sorting list in angularjs. Once a person clicks on the name of the value it updates the dom and show the data accordingly. Trying to orderby the value of Bracelet, Charms, and so on... I know I could do something like this:

$scope.sortOptions = ['Bracelets','Charms', 'Earring', ...]; //giving sorting options
$scope.sort = 'Bracelets'; //setting a default sortby item
$scope.active = function(x) {
    return x === $scope.sort ? 'active' : '';
};
$scope.setSort = function(type){ 
    $scope.sort = type.toLowerCase();
}; 

But this is just one object. I will have multiple objects. Coming from the server.

Here is my Category object:

{
    "Pandora": {
        "id": "1",
        "s1": {
            "d1": "Bracelets",
            "d2": "Charms",
            "d3": "Earrings",
            "d4": "Jewelry",
            "d5": "Necklaces",
            "d6": "Pendants",
            "d7": "Rings"
        }
    }
}

I've been reading that you can't use angularjs orderby without have an array of objects. Answered on StackOverFlow . So in my controller I have this code:

$scope.catData = [];

Then I have a factory that goes to the server grabs the json.

dataFactory.getCat().then(function(res){
  $scope.catData = res.data;
});

Here is what my HTML looks like

<li ng-repeat="(key, value) in catData">
   <a href="#" data-id='{{value.id}}' class="anchor">{{key}}</a>
   <ul class="sub" ng-class="{true: 'activeSlideF'}[value.id == 1]" >
      <span ng-repeat="hi in value.s1 | orderBy:'hi':true">
         <li>
            <a href="#"><i class="fa fa-arrow-right"></i>{{hi}}</a>
         </li>
      </span>     
   </ul>
</li>

I'm thinking that when I set the $scope.catData to an array. Then set $scope.catData = res.data it's getting overridden. I could set $scope.catData = [res.data] but I don't think that's the right way of doing it (or could be?).

Thanks for the help!

Answer 1

You can achieve this by using ng-click and ng-model to update a scope variable that is displayed in the DOM.

Below is an example and a JSFiddle:

HTML

<div id="pandora" ng-app="myApp">
    <div ng-controller="pandoraController">
        <!--Some display text that updates via the $scope.hi var-->
        <h2 ng-model="hi">{{hi}}</h2>
        <ul ng-repeat="obj in data">
            <!--Repeats the data and includes a function call for the value-->
            <li ng-repeat="entry in obj.s1" ng-click="update(entry)"><button ng-value="{{ entry }}">{{ entry }}</button></li>
        </ul>
    </div>
</div>

JS

var app = angular.module('myApp', []);

// Your data object from before
var myData = "..Some JSON data...";

app.controller('pandoraController', ['$scope',
    function($scope) {
        $scope.hi = "Select a Pandora Product:";
        $scope.data = myData;
        $scope.update = function(val) {
            $scope.hi = val;
        }
    }
]);

JSFiddle