Keep an element disabled until dropdown is not selected in Angularjs

Question

Keep an element disabled until dropdown is not selected in Angularjs

i am trying to do a small application and i am completely new to this.

here is what my code looks like.

<select id="servicename" ng-model="ServicePackages" ng-options="servicename for (servicename, ServicePackages) in ServiceType"><option value=''>Select</option></select>
            <select ng-model="price" ng-disabled="!ServicePackages" ng-options="servicepack for (servicepack, price) in ServicePackages"><option value="">Select</option></select>
            <h1 ng-disabled="!ServicePackages || !price">{{price + 1}}</h1>

I dont want H1 tag to show up until there is no second dropdown selected.

And i am not able to bind the data for

<form> 

            <select id="servicename" ng-model="ServicePackages" ng-options="servicename for (servicename, ServicePackages) in ServiceType"><option value=''>Select</option></select>
            <select ng-model="price" ng-disabled="!ServicePackages" ng-options="servicepack for (servicepack, price) in ServicePackages"><option value="">Select</option></select>
            <input type="text" ng-model="numberOfpages" />

            <h1 ng-disabled="!ServicePackages || !price">{{(price + numberOfpages)}}</h1>
        </form>

here also its just keep adding, but not performing the sum.

Thank you in advance

javascript
angularjs

Answer 1

ng-disabled isn't applicable to a <h1> tag because it isn't any kind of user input. Try it using ng-if, or ng-show (or ng-hide).

<h1 ng-hide="!ServicePackages || !price">{{price + 1}}</h1>

As for the addition, you must ensure you're adding 2 numbers, not strings.