Dynamically style based on angular value passed through

Question

I have an input value that I want to style, based on the value I receive back from the angular variable. So in my cshtml, I have:

 <input type="{{d.input_type}}" ng-style={{d.input_type}} == "radio" ? 'width:40px;' : 'width:100px;" @*class="form-control"*@ @*ng-model="Customer.CustStatus"*@ name="question_answer" id="question_answer" required >

Then in my angular .js file I have the following:

 $scope.Question = {
                Question1: '',
                input_type: ''
            }

            $http.get('/Home/getUserInfo')
    .then(function (response) {
        $scope.Question = response.data;
        console.log("status:" + response.status);
        console.log("data: " + $scope.Question);

    }).catch(function (response) {
        console.error('Error occurred:', response.status, response.data);
    }).finally(function () {
        console.log("Task Finished.");
    });

Based on the value I receive back (which is either "radio" or "text"), I want to have different styling. For example, I want to have a radio button height of 20px and text must be 40px. How would I go about having conditional styling on my input value, based on the text value I receive back from "input_type".

Any help would be greatly appreciated.

Luca De Nardi · Accepted Answer · 2017-11-03 09:49:55Z

3

The syntax is

<input ... ng-style="{'width': d.input_type == 'radio' ? '40px' : '100px'}" ...>

So you first specify the property you're going to set and then its value based on your logic.

edited Nov 3, 2017 at 9:49

answered Nov 3, 2017 at 9:47

Luca De Nardi

2,3212 gold badges19 silver badges36 bronze badges

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

8 Comments

Luca De Nardi Over a year ago

Thanks @NikolajDamLarsen, I copied the code from the question and didn't noticed the double brackets :)

user1397978 Over a year ago

and I wouldn't need to put d.input_type between two {}?

Nikolaj Dam Larsen Over a year ago

@user1397978 No, Angular already assumes everything passed to the ng-style directive is a javascript expression, so it doesn't need to interpolate it using {{ }}.

Luca De Nardi Over a year ago

Nikolaj was faster with the answer but that's the logic :)

Luca De Nardi Over a year ago

@user1397978 sure, just wrap the statement inside brackets so you're sure it gets evaluated correctly (d.input_type == 'radio' || d.input_type == 'checkbox')?...

|

Collectives™ on Stack Overflow

Dynamically style based on angular value passed through

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related