javascript - Angularjs orderby 对象键

Question

所以，我正在尝试在 angularjs 中创建一个排序列表。一旦有人点击值的名称，它就会更新 dom 并相应地显示数据。尝试按手链、吊饰等的值(value)进行排序...我知道我可以这样做:

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

但这只是一个对象。我将有多个对象。来自服务器。

这是我的类别对象:

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

我一直在读到，如果没有对象数组，就不能使用 angularjs orderby。已回复 StackOverFlow 。所以在我的 Controller 中我有这样的代码:

$scope.catData = [];

然后我有一个工厂去服务器获取 json。

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

这是我的 HTML 的样子

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

我在想，当我将 $scope.catData 设置为数组时。然后设置 $scope.catData = res.data 它将被覆盖。我可以设置 $scope.catData = [res.data] 但我认为这不是正确的方法(或者可能是？)。

感谢您的帮助!

Answer 1

您可以通过使用 ng-click 和 ng-model 更新 DOM 中显示的范围变量来实现此目的。

下面是一个示例和一个 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