Angular JS:根据下拉选择对网格内容进行排序

时间:2014-04-29 10:51:12

标签: angularjs

我的headerCellTemplate中有一个下拉按钮,看起来像这样

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle"
            data-toggle="dropdown">
        <b>Value</b><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" style="position:fixed;top:inherit;left:320px;">
        <li><a href="#">H</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">L</a></li>
    </ul>
</div>

点击它是为了对ng网格内容进行排序。我编写了可以从H-M-L中对网格内容进行排序的代码。该函数看起来像这样

var result = 1;
var test="HML";
function impSortFn(a, b) {
    a=test.indexOf(a);
    b=test.indexOf(b);
    if (a == b) return 0;
    if (a < b) return -1;
    return result;
}

列Defs看起来像这样

columnDefs: [
    {
        field:'dt', displayName:'Date',  width:'***',
        cellFilter:'date:\"dd-MMM-yyyy\"', headerClass:'grad1',
        cellTemplate:'<div><center>{{row.getProperty(\'dt\')|dateformat}}</center></div>'
    },
    {
        field:'dt', displayName:'Time',  width:'**',
        cellFilter:'date:\"HH:mm:ss\"', headerClass:'grad1',
        cellTemplate:'<div><center>{{row.getProperty(\'dt\')|timefilter}}</center></div>'
    },
    {
        field:'rl', displayName:'Impact',width:'80px',
        sortFn:impSortFn, headerClass:'grad1', headerCellTemplate:"impactHeader.html",
        cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><center><img  ng-src="{{row.getProperty(\'rl\') | dateformat1}}"</img></center></div>'
    }
]

任何人都可以告诉我如何修改该功能,使其在从下拉列表中选择M时仅返回M值。和H和L相同。

1 个答案:

答案 0 :(得分:0)

为了以某种方式提供帮助,我发布了一个SO答案,这是解决问题的另一种方法。

确实有更好的做法。

看看这个SO question

在这个问题中,ng-change被添加到您的元素中,这是完全可行的。根据新值,您再次绑定网格..

我在我的一个项目中使用它。这是......

<input maxlength="34" type="text" ng-model="pollInfo.companyName" ng-change="updateIframe()" class="has-success form-control pull-left" placeholder="Anket Logo Yazısı" required id="companyName">

Ang获取控制器中的更改

$scope.updateIframe = function() {
        var data=new Object();
        data.questions=$scope.questions;
        data.pollInfo=$scope.pollInfo;
        document.getElementById('iframe').contentWindow.updatedata(data);       
    };

你可以这样做。在您的方法中绑定您的网格。同样,这不是最佳做法。 最佳做法是使用$ filter。但是我需要更多信息来解决它。