0

I have an angularjs template where some of the ngModel variable are empty. They are all attached to a html element. I am very confused as to how to create an angularjs element that all this html elements would inherit so that if a variable is empty or does not have anything inside its content then it should display a default content. This is what i have done currently.

    <h3 ng-bind="name">Student's name</h3>
    <p ng-bind="description"> More about the programme</p>
    <h2 ng-bind="title">Details about the programme for the whole years</h2>

So instead of this area been empty because there is nothing there I would want it to display the default text shown. I think it is a drirective matter but I am not really that good with it

cloned
  • 6,346
  • 4
  • 26
  • 38
williambrian
  • 3
  • 1

1 Answers1

0

You can apply below simple solutions-

1. Set an expression to ng-bind

<h3 ng-bind="name || 'Student\'s name'"></h3>
<p ng-bind="description || 'More about the programme'"></p>
<h2 ng-bind="title || 'Details about the programme for the whole years'"></h2>

Note: Escape character "" is added in the default text

2. Use expression as element content instead of ng-bind, but ng-bind is the preferred option.

    <h3>{{name || "Student's name"}}</h3>
    <p>{{description || "More about the programme"}}</p>
    <h2>{{title || "Details about the programme for the whole years"}}</h2>

3. Writing getters in the Component/Controller class of the directive for all these properties.

In the getter function, you can decide to return default values as fallback when values are not to these properties.

About creating parent element/directive: even if you create a generic directive, the default values are distinct for each use case. So you will end up writing more or less similar code to set default values to new element/directive.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Rahul Wakade
  • 4,765
  • 2
  • 23
  • 25
  • Thanks very much. About the component controller class please do you have any example i can follow? – williambrian Jan 04 '23 at 05:03
  • You can find many references if you search on Google on how to write a Component. You just need to add getter/setter as you usually do in any OOPS language. e.g. https://stackoverflow.com/questions/35451652/what-is-best-practice-to-create-an-angularjs-1-5-component-in-typescript https://david-rodenas.com/AngularJsComponentsTypescript/ – Rahul Wakade Jan 04 '23 at 07:34