>>Hi everybody,
>>
>>I have the following HTML
>>
>>

>><div id="tagsList" class="tags-cloud col-xs-12">
>>                    <div ng-repeat="filter in filters.filters">
>>                        <div class="tag">
>>                            <span><span>{{filter.columnDisplayName + " "}}</span>
>>                            <span class="operator">{{filter.strOperator}}</span>
>>                            <span>{{' "' + filter.displayValue + '"'}}</span></span>
>>                            <span><b ng-click="removeFilter($index)" class="cross">x</b></span>
>>                        </div>
>>                        <span class="logic" ng-show="!$last">{{filters.logic}}</span>
>>                    </div>
>>                </div>

>>
>>I want to change the {{filter.strOperator}} into
>>
>>{{getOperatorDescription(filter.strOperator)}}
>>
>>However, I am getting errors when I try that.
>>
>>First time it works, then the second time I get
>>

>>TypeError: Cannot create property 'value' on string ''
>>

>>I am not sure how should I make it to work.
>>
>>Thanks in advance.
>
>So what's in getOperatorDescription() ?

The getOperatorDescription is very simple (just find element in the array). However, later in the night I found it doesn't matter if I use that expression or use the original expression and not call that function at all, I still get the same error. Today I need to work with my colleague to determine if the bug was already there and has nothing to do with what I was trying to achieve.

If it is indeed an old bug, it is a hard to fix one :(

UPDATE. I confirmed with my colleague that there was a bug already there and it has nothing to do with my most recent changes.

Now, since there is a bug, I probably should try to fix it anyway, but it's a tough one. I'll post the whole directive code (it's relatively small), perhaps you can spot the problem better than me. It happens only the second time when I try to type anything in the textbox. The first time everything works fine.

(function (angular) {
    "use strict";

    var log = undefined;

    angular.module("sysMgrApp").directive("smAdvancedSearch", [
        "$log",
        smAdvancedSearch
    ]);

    /**
     * The directive entry point
     * @param {} $log 
     * @returns {} 
     */
    function smAdvancedSearch($log) {
        log = $log.getInstance("smAdvandedSearch");

        return {
            restrict: "AE",
            templateUrl: "app/templates/smAdvancedSearch",
            controller: ["$scope", "$rootScope", controller],
            link: link,
            scope: {
                filters: "=",
                criteria: "=",
                hidehiddenfilter: "=",
                toggle: "&?",
                dosearch: "&",
                canShowSimpleSearch: "=?",
                isPinned: "=?"
            }
        }
    }

    /**
     * The directive controller
     * @param {} $scope 
     * @returns {} 
     */
    function controller($scope, $rootScope) {
       // log.debug("Controller activated");

        $scope.hidehiddenfilter = !!$scope.hidehiddenfilter;
        $scope.toggle = $scope.toggle || $scope.$parent.toggleDisplayMode;
        $scope.canShowSimpleSearch = !!$scope.canShowSimpleSearch;
        $scope.isOpen = false;
        $scope.canShowInput = false;
        $scope.isFreeFormRequired = false;
        $scope.isPinned = !!$scope.isPinned;       

        $scope.$watch("canShowInput",
            function (newValue, oldValue) {
                if (newValue !== oldValue && _.isObject($scope.field) &&  $scope.field.strInputSource === "FreeForm") {
                    angular.element("#advanced-search")
                        .on("blur",
                            function () {
                                if (!$scope.isFreeFormRequired) {
                                    
                                    $scope.isFreeFormRequired = true;
                                }
                            });
                }
            });

        $scope.filters = $scope.filters || {
            filters: [],
            basefilters: [],
            logic: "AND"
        };

        if (!$scope.filters.hasOwnProperty("filters")) {
            $scope.filters.filters = [];
        }

        if (!$scope.filters.hasOwnProperty("basefilters")) {
            $scope.filters.basefilters = [];
        }

        if (!$scope.filters.hasOwnProperty("logic")) {
            $scope.filters.logic = "AND";
        }

        if (!_.isArray($scope.filters.filters)) {
            throw new Error("filters.filters should be an array");
        }

        if (!_.isArray($scope.filters.basefilters)) {
            throw new Error("filters.basefilters should be an array");
        }

        $scope.dateOptions = {
            showWeeks: false,
            startingDay: 1
        };

        /**
         * @returns {} 
         */
        $scope.togglePinned = function() {
            $scope.isPinned = !$scope.isPinned;
        };

        /**
         * @params {string} operatorString
         * @returns string description 
         */
        $scope.getOperatorDescription = function (strOp) {
            if (_.isObject($scope.field) && $scope.field.possibleOperators)
                return $scope.field.possibleOperators.find(x => x.key === strOp).value;
            else
                return strOp;
        }

        /**
         * 
         * @param {} col 
         * @param {} op 
         * @param {} val 
         * @returns {} 
         */
        $scope.addFilter = function (col, op, val) {
            
            var jsonval = {};            
            let opDescription = $scope.getOperatorDescription(op);
            var filter = {
                columnDisplayName: col.columnDisplayName,
                columnName: col.columnName,
                columnType: col.columnType,
                value: undefined,
                displayValue: undefined,
                strOperator: op,
                stringOperator: opDescription,
                Logic: "AND"
            };

            if (moment(val, "MM/DD/YYYY", true).isValid()) {
                jsonval.value = moment(val).format("MM/DD/YYYY HH:mm:ss");
            }

            else if (_.isObjectLike(val)) {
                jsonval = val;
            }

            else {
                jsonval = JSON.parse(val);
            }

            jsonval.key = jsonval.key || jsonval.value;
            filter.value = jsonval.key;
            filter.displayValue = jsonval.value;
            $scope.field = "";
            $scope.op = "";
            $scope.val = "";
            $scope.canShowInput = false;

            $scope.filters.filters.push(filter);
            $scope.clicksearch();

            $rootScope.$broadcast("smAdvancedSearch:addFilter");

            if (!$scope.isPinned) {
                //$scope.toggle();
            }
        }

        /**
         * 
         * @param {} index 
         * @returns {} 
         */
        $scope.removeFilter = function (index) {
          //  log.debug("Removing filter");

            $scope.filters.filters.splice(index, 1);
            $scope.clicksearch();

            $rootScope.$broadcast("smAdvancedSearch:removeFilter", $scope.filters.filters.length);
        }

        /**
         * 
         * @returns {} 
         */
        $scope.clearFilters = function () {
      //      log.debug("Clearing filters");

            $scope.filters.filters = [];
            $scope.field = "";
            $scope.op = "";
            $scope.val = "";
            $scope.clicksearch();

            $rootScope.$broadcast("smAdvancedSearch:clearFilters");
        }

        /**
         * Do the search
         * @returns {} 
         */
        $scope.clicksearch = function () {
    //        log.debug("Clicked search");

            $scope.filters.basefilters = [];
            $scope.dosearch();
        }

        $scope.onSelectOperator = function () {
            $scope.canShowInput = !!$scope.op;
        }
    }

    function link(scope, element, attrs, ngModelCtrl) {
        scope.$watch("field.strInputSource", function (newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }

            if (newValue === "FreeForm") {
                var input = element.find("input#advanced-search");
                var button = element.find("input#add-filter");

                input.keypress(function (e) {
                    if (13 === e.which) {
                        button.trigger("click");
                    }
                });
            }
        });

    }
})(angular);