Category Filters Helper

by sandesh247

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.min.js"></script>
<div ng-app>
  <h2>Category Filters</h2>
  <div ng-controller="CategoryCtrl">
    <button ng-click="reset()">Reset</button>
        <table>
            <tr>
                <td>Match name? </td><td><input type="checkbox" ng-model="category_filter.match_name" /></td>
            </tr>
            <tr>
                <td>Trigger </td><td><input type="text" ng-model="category_filter.trigger" /></td>
            </tr>
            <tr>
                <td>Name match priority </td>
                <td>
                    <select ng-model="category_filter.name_match_priority">
                      <option value="SIGNIFICANCE_MEDIUM">SIGNIFICANCE_MEDIUM</option>
                      <option value="SIGNIFICANCE_LOW">SIGNIFICANCE_LOW</option>
                      <option value="SIGNIFICANCE_HIGH">SIGNIFICANCE_HIGH</option>
                      <option value="SIGNIFICANCE_ULTRA">SIGNIFICANCE_ULTRA</option>
                    </select>
                </td>
            </tr>
      </table>
      <h2>Rules:</h2>
     <table>
      <tr ng-repeat="rule in category_filter.rules">
          <td><button ng-click="removeRule(rule.category)">X</button></td>
          <td><input type="text" ng-model="rule.category" /></td>
          <td>  <select ng-model="rule.priority">
            <option value="SIGNIFICANCE_MEDIUM">SIGNIFICANCE_MEDIUM</option>
            <option value="SIGNIFICANCE_LOW">SIGNIFICANCE_LOW</option>
            <option value="SIGNIFICANCE_HIGH">SIGNIFICANCE_HIGH</option>
            <option value="SIGNIFICANCE_ULTRA">SIGNIFICANCE_ULTRA</option>
            </select>
          </td>
          <td>
        exact?<input type="checkbox" ng-model="rule.exact">
          </td>
      </tr>
     </table>
    <span>{{category_filter.rules.length}} rules</span>
    <form ng-submit="addRule()">
      <input type="text" ng-model="categoryText"  size="30"
             placeholder="specify...

JavaScript

function CategoryCtrl($scope) {
    var default_category_filter = {
        trigger: "",
        match_name: false,
        name_match_priority: "SIGNIFICANCE_MEDIUM",
        rules: []
    };

    $scope.addRule = function() {
        var invalid = false;
        angular.forEach($scope.category_filter.rules, function(rule) {
            if (rule.category == $scope.categoryText) {
                invalid = true;
            }

            return !invalid;
        });

        if (invalid) {
            alert('category "' + categoryText + '" already present.');
            return;
        }

        $scope.category_filter.rules.push({
            category: $scope.categoryText,
            exact: true,
            priority: "SIGNIFICANCE_MEDIUM"
        });
        $scope.categoryText = '';
    };

    $scope.removeRule = function(category) {
        var oldRules = $scope.category_filter.rules;
        $scope.category_filter.rules = [];
        angular.forEach(oldRules, function(rule) {
            if (rule.category != category) {
                $scope.category_filter.rules.push(rule);
            }
        });
    };

    $scope.reset = function() {
        $scope.category_filter = angular.extend({}, default_category_filter);
        $scope.category_filter.rules = [];
    };

    $scope.reset();
}