angular.formatter

HTML

<script src="http://docs-next.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>

<script>
function AuditLogController($resource, $defer) {
    var self = this;
    this.errorMessage = "";
    this.keepPolling = true;
    
    // The query object to send to the request.
    this.queryObject = {
        componentNames:[]
    };
    
    // Component list results mimic. This comes from a service call normally.
    this.componentList = {
        "results": [
            "Component_1",
            "Component_2",
            "Component_3"
        ]
    }
}
    
angular.formatter('include', { 
    parse: function(apply, value, list) {
        angular.Array[apply ? 'add' : 'remove'](list, value);
        return apply;
    },
    format: function(apply, value, list) {
        return angular.Array.indexOf(list, value) != -1;
    },
});

</script>

<div ng:controller="AuditLogController">
    <hr/>
    Query Object: {{queryObject}}
    <hr/>
    <h5>Add Components to Query</h5>
    <ul style="list-style-type:none;">
        <li ng:repeat="component in componentList.results" style="list-style-type:none;">
            <input type="checkbox" name="apply" ng:format="include:component:queryObject.componentNames" /> {{ component }}
        </li>
    </ul>
    
</div>

JavaScript

!function(){"use strict";angular.module("angle",["app.core","app.routes","app.sidebar","app.navsearch","app.preloader","app.loadingbar","app.translate","app.settings","app.dashboard","app.icons","app.flatdoc","app.notify","app.bootstrapui","app.elements","app.panels","app.charts","app.forms","app.locale","app.maps","app.pages","app.tables","app.extras","app.mailbox","app.utils"])}(),function(){"use strict";angular.module("app.bootstrapui",[])}(),function(){"use strict";angular.module("app.charts",[])}(),function(){"use strict";angular.module("app.colors",[])}(),function(){"use strict";angular.module("app.core",["ngRoute","ngAnimate","ngStorage","ngCookies","pascalprecht.translate","ui.bootstrap","ui.router","oc.lazyLoad","cfp.loadingBar","ngSanitize","ngResource","tmh.dynamicLocale","ui.utils"])}(),function(){"use strict";angular.module("app.dashboard",[])}(),function(){"use strict";angular.module("app.elements",[])}(),function(){"use strict";angular.module("app.extras",[])}(),function(){"use strict";angular.module("app.flatdoc",[])}(),function(){"use strict";angular.module("app.forms",[])}(),function(){"use strict";angular.module("app.icons",[])}(),function(){"use strict";angular.module("app.lazyload",[])}(),function(){"use strict";angular.module("app.loadingbar",[])}(),function(){"use strict";angular.module("app.locale",[])}(),function(){"use strict";angular.module("app.mailbox",[])}(),function(){"use strict";angular.module("app.navsearch",[])}(),function(){"use strict";angular.module("app.notify",[])}(),function(){"use strict";angular.module("app.maps",[])}(),function(){"use strict";angular.module("app.pages",[])}(),function(){"use strict";angular.module("app.panels",[])}(),function(){"use strict";angular.module("app.preloader",[])}(),function(){"use strict";angular.module("app.routes",["app.lazyload"])}(),function(){"use strict";angular.module("app.settings",[])}(),function(){"use strict";angular.module("app.sidebar",[])}(),function(){"use...