AngularJS : angular-ui-根据条件显示行的网格

Question

我希望我的网格显示仅匹配标准的行。例如，我希望我的网格仅显示名称为 Brian 的行。

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.myData = [{name: "Brian", code: 50,count:20},
                 {name: "Jason", code: 43,userid:1},
                 {name: "Brian", code: 27,userid:10},
                 {name: "Devon", code: 29,userid:7},
                 {name: "Kale", code: 34,userid:2}];

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',
    columnDefs: [
      { field: 'name', displayName: 'Name'},
      {field: 'code', displayName: 'Code'},
      { field: 'userid', displayName: 'UserId'
        }
      }
    ]
  };
}]);

我怎样才能做到这一点？提前谢谢你...

Answer 1

您需要使用 filter。您可以阅读标准 angular 过滤器 here. You can read about how to make custom filters here.

Answer 2

解决方法之一是，不要传递 myData 而是过滤您的条件，然后将过滤后的数据分配给新的范围变量并将其分配到您的 gridOptions 数据字段中

代码

$scope.filteredData = myData; //make filter your data manually here 

$scope.gridOptions = {
    enableSorting: true,
    data:'filteredData', //passed filtered data here.
    columnDefs: [
      { field: 'name', displayName: 'Name'},
      {field: 'code', displayName: 'Code'},
      { field: 'userid', displayName: 'UserId'
        }
      }
    ]
};

AngularJS : angular-ui-根据条件显示行的网格

AngularJS : angular-ui-grid showing rows based on the condition

angularjs

angular-ui-grid