How not to show element that has no content using Angular js?

Question

I have to list to the user a message within a panel depending on the "Radio" that face will click to show a message. has a radio as YES and another as NO.

If he clicks yes, he will have to show you a message and if he is not to show you anything. I managed to do, but sometimes when you click yes it shows the empty panel.

Does anyone have an idea to help me? Here’s the code for what I’ve been able to do:

<div class="col-xs-5">
  <div class="checkbox mt0 mb0 text-center">
    <div class="row">
      <div class="col-xs-6 pr-0">
        <label class="radio-inline c-radio mt0 text-bold color-green-template">
          <input type="radio" ng-model="pergunta.resposta" ng-value="true"/><span class="fa fa-circle assessment__checkbox"></span>{{'form.YES' | translate}}
        </label>
        <div class="pull-right hidden-xs hidden-sm">
          <div class="vertical-line-total color-green-template-light height-20 mt-5"></div>
        </div>
      </div>
      <div class="col-xs-6 pr-0">
        <label class="radio-inline c-radio mt0 text-bold color-green-template">
          <input type="radio" ng-model="pergunta.resposta" ng-value="false"/><span class="fa fa-circle assessment__checkbox"></span>{{'form.NO' | translate}}
        </label>
      </div>
    </div>
  </div>
</div>
<div class="row border-error mt-10 br-md" ng-repeat="pergunta in $ctrl.security_questions  | orderBy: 'ordem_pergunta'" ng-if="pergunta.resposta">
  <p class="textMedium">{{item = pergunta.resposta_sim}}</p>
</div>

what should be done: when the user clicks YES and LENGTH is less than zero it shows nothing.

Answer 1

You can handle it yourself. This is what I wanted to do:

<div class="row border-error mt-10 br-md" ng-repeat="pergunta in $ctrl.security_questions  | orderBy: 'ordem_pergunta'" ng-if="pergunta.resposta === true && pergunta.resposta_sim !== ''">
  <p class="textMedium">{{item = pergunta.resposta_sim}}</p>
</div>

{{item = question.}}