Question

我有一个类似

的对象

x=[{a:1,b:2,c:3,d:'A'},{a:3,b:3,c:1,d:'C'},{a:2,b:1,c:2,d:'B'}]

在HTML中查看有3个按钮

<button ng-click="sortbyA()">
<button ng-click="sortbyB()">
<button ng-click="sortbyC()">

弹出窗口

 <div ng-repeat='i in x | orderBy:sortBy'>
 <table>
 <tr><td>{{i.d}}</td></tr>
 </table>
  </div>

Angular JS Controller：

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

app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {

 $scope.get_results=function(){
    var response= $http.get();
     response.success(function(){
       $scope.sortBy='a';
        });
        }

 $scope.sortbyA=function(){
 $scope.sortBy='a';
 }

 $scope.sortbyB=function(){
 $scope.sortBy='b';
  }
 $scope.sortbyC=function(){
 $scope.sortBy='c';
 }
 }])

用例是根据不同的点击次数（A，B，C）填充表中的数据及其在x中的对应属性

例如：如果点击B，表格应按属性排序：b，如果单击C，表应具有按属性排序的数据：c

Answer 1

在HTML中

＆＃13;

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {

    $scope.data = [{ a: 1, b: 2, c: 3, d: 'A' }, { a: 3, b: 3, c: 1, d: 'C' }, { a: 2, b: 1, c: 2, d: 'B' }];
     $scope.sortBy = 'a'; //for default sorting
     $scope.sortItems = function(key) {
        $scope.sortBy = key; // key on which prop you want to sort
     };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
    <div class="" ng-controller="MainCtrl">
        <button ng-click="sortItems('a')">a</button>
        <button ng-click="sortItems('b')">b</button>
        <button ng-click="sortItems('c')">c</button>
        <button ng-click="sortItems('d')">d</button>
        <br />
        <div ng-repeat='i in data | orderBy:sortBy'>
            <table>
                <tr>
                    <td>{{i.a}}</td>
                    <td>{{i.b}}</td>
                    <td>{{i.c}}</td>
                    <td>{{i.d}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>

＆＃13;

Answer 2

回复数据：

x=[{a:1,b:2,c:3,d:'A'},{a:3,b:3,c:1,d:'C'},{a:2,b:1,c:2,d:'B'}]

你的按钮：

<button ng-click="sortBy = 'a'">
<button ng-click="sortBy = 'b'">
<button ng-click="sortBy = 'c'">

你的桌子：

 <div ng-repeat='i in x | orderBy:sortBy'>
 <!-- blabla -->

你的js：

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

app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
 $scope.sortBy = 'a';
 $scope.get_results=function(){


var response= $http.get();
     response.success(function(){
            //blabla
        });
        }
 }])

Angular JS orderBy动态值

2 个答案: