if else condition in angularjs to compare string and int value

Question

I want to check if both the font and the fontSize is undefined which was sent from the client side.When the user do not select the font or font size, it pass the value undefined. These conditions work well when only one of them (font or font size) is undefined, but when both of them are undefined, I recieve an error,

TypeError: Cannot read property 'font' of undefined
    at Scope.StylesCtrl.$scope.addStyles (http://0.0.0.0:8080/app/edit/styles/StylesCtrl.js:26:38)
    at fn (eval at <anonymous> (http://0.0.0.0:8080/bower_components/angular/angular.js:13231:15), <anonymous>:4:317)
    at ngEventDirectives.(anonymous function).compile.element.on.callback (http://0.0.0.0:8080/bower_components/angular/angular.js:23411:17)
    at Scope.$get.Scope.$eval (http://0.0.0.0:8080/bower_components/angular/angular.js:15916:28)
    at Scope.$get.Scope.$apply (http://0.0.0.0:8080/bower_components/angular/angular.js:16016:25)
    at HTMLInputElement.<anonymous> (http://0.0.0.0:8080/bower_components/angular/angular.js:23416:23)
    at HTMLInputElement.jQuery.event.dispatch (http://0.0.0.0:8080/bower_components/jquery/dist/jquery.js:4435:9)
    at HTMLInputElement.jQuery.event.add.elemData.handle (http://0.0.0.0:8080/bower_components/jquery/dist/jquery.js:4121:28) undefined

Below is my if else conditions in the server side,

if(font == undefined && fontSize == undefined){ //doesn't work
        console.log("font");
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color}
        ], function (err) {
            console.log((err));
        });
    }

    else if(font == undefined){ //work well
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color},
            {rule: ".made-easy-themeFontSize", target: "font-size", replacer: fontSize + "em"}
        ], function (err) {
            console.log((err));
        });
    }
    else if(fontSize == undefined){ //work well
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color},
            {rule: ".made-easy-themeFont", target: "font-family", replacer: font}
        ], function (err) {
            console.log((err));
        });
    }

    else{ //work well
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color},
            {rule: ".made-easy-themeFont", target: "font-family", replacer: font},
            {rule: ".made-easy-themeFontSize", target: "font-size", replacer: fontSize + "em"}
        ], function (err) {
            console.log((err));
        });

    }

This is the html code in front end

 <h3 ng-style="{'font-family': styles.textSize.font, 'font-size': styles.textSize.size + 'px'}">Text Is</h3>

This is the controller to send data to the server

$scope.addStyles = function(styles) {
            $scope.fontdata = {
                appId: "55c0ace94aa248735d75b140",
                header: styles.uploadme,
                color: styles.myColor,
                font: styles.textSize.font,
                fontSize: styles.textSize.size
            };
                stylesService.editStyles($scope.fontdata)
                    .success(function (res) {
                        console.log("success");
                    })
        };

Is there any problem with my if else statements? or is it because I am comparing string value(font) and an int value(fontSize)?

Sunil D. · Accepted Answer · 2015-08-31 06:13:23Z

1

The problem is likely that you're not initializing your model objects on the $scope. It has nothing to do w/your server side if/else... As @Hrishi points out, it's a Javascript error :)

To fix it, you need to initialize the object styles.textSize on your scope.

The reason is that Angular (ng-model?) will create this object for you when the user types into one of the inputs. But when the user doesn't type anything, styles.textSize never gets defined.

Just guessing here, b/c we can't see your template or the rest of the code in your controller, but fix it do something like this:

$scope.styles = {
  textSize: {
  }
};

answered Aug 31, 2015 at 6:13

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hrishi · Accepted Answer · 2015-08-31 05:54:11Z

1

The stack clearly says that error is in the StyleCntrl.js at below location at Scope.StylesCtrl.$scope.addStyles (http://0.0.0.0:8080/app/edit/styles/StylesCtrl.js:26:38)

and it apppears to be at below line inside addStyles function font: styles.textSize.font

The issue is because textSize in styles object is undefined and if you try to read any property on undefined object java-script will always throw an error as

TypeError: Cannot read property '' of undefined

answered Aug 31, 2015 at 5:54

Hrishi

7614 silver badges12 bronze badges

2 Comments

shamila Over a year ago

How can I make it work, how can I define it(textSize)?

Hrishi Over a year ago

just initialize you model in scope with empty object as below $scope.styles = { textSize: {} }

Collectives™ on Stack Overflow

if else condition in angularjs to compare string and int value

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related