conditional styling without 'else' in angularjs-CodePudding

I have a component that is being used by many pages:

<input 

  ng-style="{$ctrl.page0 ? 'border-color:blue' : ''}" 
  
   
  type="text" 
  ng-change="$ctrl.dateChange()" 

/>

  <button ng-click="$ctrl.open()">Continue</button>

I want to use something like this:

ng-style="{$ctrl.page0 ? 'border-color:blue' : ''}"
ng-style="{$ctrl.page1 ? 'border-color:red' : ''}"
ng-style="{$ctrl.page2 ? 'border-color:yellow' : ''}"

But because of the "else", it won't work

What is the syntax to just use:

ng-style="{$ctrl.page0 ? 'border-color:blue'}"

CodePudding user response：

According to the given details, Try below code.

    ng-style="{'border-color': $ctrl.page0 ? 'blue' : 
               ($ctrl.page1 ? 'red' : ($ctrl.page2 ? 'yellow' : '')) }"

CodePudding user response：

You can write like this:

ng-style="$ctrl.page0 ? {border-color:'blue'} : {}"