Question

所以，我试图在angularjs中创建一个排序列表。一旦某人点击该值的名称，它就会更新dom并相应地显示数据。试图按照手镯，魅力等的价值排序......我知道我可以这样做：

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

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

这是我的Category对象：

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

我一直在读，你不能使用angularjs orderby而没有一个对象数组。在 StackOverFlow 上回答。所以在我的控制器中我有这个代码：

$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

Angularjs由对象键排序

1 个答案: