在Angular中对数据进行排序

时间:2016-07-12 06:54:23

标签: angularjs

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>

table{
border:2px solid black;
border-collapse:collapse;
font-family:Arial;

}

td{
    border:2px solid black;
    padding:5px;
}

th{
    border:2px solid black;
    padding:10px;
}
</style>


</head>

<script type="text/javascript">

var app=angular.module("myApp",[]);
app.controller("likeDislikeCount",function($scope)
{
    var technology=[
                {name:"C",like:0,Dislike:0},
                {name:"Python",like:0,Dislike:0},
                {name:"Java",like:0,Dislike:0},
                {name:"Angular",like:0,Dislike:0}
];
    $scope.technology=technology;

    $scope.rowLimit=1;
    $scope.selectCol=name;

    $scope.increeseLike=function(technology1){
        technology1.like++;
    };

    $scope.increseDisLike=function(technology1){
        technology1.Dislike++;
    };

}   
);
</script>


<body  ng-app="myApp">
<div ng-controller="likeDislikeCount">
No. of rows to display :: <input type="number" ng-model="rowLimit" min=0 max=4 /> <br><br>

order by <select ng-model="selectCol">
    <option value="name">Name ASC</option>
    <option value="like">LIke ASC</option>
    <option value="-Dislike">Dislike DSC</option>

    </select>
<br><br>
    <table>

    <thead>
    <th>Name</th>
    <th>LikeCount</th>
    <th>DislikeCount</th>
    <th>Click</th>
    </thead>
    <tbody>
    <tr ng-repeat = "x in technology | orderBy:'selectCol'">

    <td>{{x.name}}</td>
    <td>{{x.like}}</td>
    <td>{{x.Dislike}}</td>


    <td><button ng-click="increeseLike(x)">LIKE</button><button ng-click="increseDisLike(x)">DISLIKE</button></td>


    </tr>
    </tbody>

    </table>
    </div>
</body>
</html>

这段代码我试图根据任何名称,喜欢和不喜欢的顺序显示表。当我从下拉列表中选择任何一个时它应该根据该字段的数据。但它不能正常工作。 请完整地纠正它并帮助我 感谢

1 个答案:

答案 0 :(得分:0)

只需从表格的<tr>标记中删除单引号,就像这样

<tr ng-repeat = "x in technology | orderBy:selectCol">

它会起作用