Filter on ng-options

Filter on ng-options

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<h1>Filter on ng-options</h1>

<div ng-controller="MyCtrl">
    List Values:
    <br>{{headerOptions}}
        <hr/>
    Selected Value: {{value}}
    <hr/>
    <select ng-model="value" ng-options="key as option.label for (key, option) in headerOptions | customFilter"></select>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.value = '0';
    $scope.headerOptions = {
        0: {
            label: 'Ignore Column',
            value: '',
            enabled: true,
            value: '0'
        },
        1: {
            column: 'id',
            label: 'Creative ID',
            enabled: true,
            value: '1'
        },
        2: {
            column: 'friendlyName',
            label: 'Creative Name',
            enabled: false,
            value: '2'
        },
        3: {
            column: 'groupName',
            label: 'Creative Group',
            enabled: false,
            value: '3'
        }
    };
}

// FILTER
app.filter('customFilter', function () {
    return function (obj) {
        var filterObj = [];
        for (var key in obj) {
            if (obj[key].enabled === true) {
                filterObj.push(obj[key]);
            }
        }
        return filterObj;
    };
});