2015年10月16日 星期五

angularjs 的 filter 和 orderby 進階用法

變數直接篩選
ng-options="a for a in typeList | filter:'!往來帳'"

類似 linq where 用法,直接在 javascript 中使用
var a=$scope.Room.filter(function (r) {
                (return true or false)
            });

module 加入 filter
.filter('filterItemBuyed', function () {
        return function (items, category) {
            return Enumerable.From(items).Where(a => a.數量 > 0 && (!category || a.上層分類 == category)).ToArray();
        };
    })
ng-repeat="item in (items | filterItemBuyed:category.value)"

依據物件屬性篩選
 $scope.results = {
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
ng-repeat="subject in results.subjects | filter:{grade:'C'}" 
※ filter:{grade:''} 表示只抓 grade 不為空

自訂排序 for ng-repeat
.filter('order', function () {
    return function (items, sortcolumn) {
        var filtered = [];
        angular.forEach(items, function (item) {
            filtered.push(item);
        });
        filtered.sort(function (a, b) {
            if (sortcolumn==1)
              return (a.id > b.id ? 1 : -1);
            else
              return (a.name > b.name ? 1 : -1);
        });
        return filtered;
    };
});
ng-repeat="room in rooms | order:sortcolumn"

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器