CODEWITHSUNDEEP
angularjs
Bill Pope
Bill Pope

Reputation: 591

Add message after ng-if removes all elements

Here's what I'm trying to do. I'm building an app using ionic, angular and I have two tabs with lists of questions that users had entered. Once a question is answered on the first tab (tab a) it gets hidden using ng-if because a property gets added called 'conversation' so the question moves from one tab to the other via it being hidden in one and shown in the other. This all works fine.

However, once there's no question left because they've all been hidden in tab a, i'd like to show a message. This has been the most exhausting trial an error (mostly error) i've ever done. i've different directive configurations and, most recently, a custom filter, nothing seems to work perfectly.

Here's some experimental code. I tried listening on the tab. (this is just one try. I also tried custom filter and another configuration of this directive)

 //template
<ion-view view-title="Questions">
<ion-content>
    <ion-list ng-show="rooms" class="display-text">
        <ion-item class="item-icon-left questions" ng-repeat="room in rooms" ng-if="!room.conversation" type="item-text-wrap" ng-click="openChatRoom(room.schoolid, room.$id, room.userid, room.question)">
            <i class="icon {{room.icon}}"></i>
            <h2>{{room.question}}</h2>
        </ion-item>
    </ion-list>
    <div class="msg"></div>
    <ion-list ng-hide="rooms.length">
        <ion-item class="textCenter">
            <i class="icon ion-loading-c"></i> Loading Rooms
        </ion-item>
    </ion-list>
</ion-content>


restrict: 'C', 
link: function(scope, elem, attrs) {
      scope.$watch('tabs', function (){
          var myEl = angular.element( document.querySelector('.questions'));
          if(scope.tabs == 'ctrl1'){
              if(!myEl){
                  var temp = $compile('<ion-item class="textCenter"><i>No conversations<i></ion-item>');
                  var content = temp(scope);
                  elem.find('div').append(content);
              }
          }
          if(scope.tabs == 'ctrl2'){
              if(!myEl){
                  var temp = $compile('<ion-item class="textCenter"><i>No current questions<i></ion-item>');
                  var content = temp(scope);
                  elem.find('div').append(content);
              }
          }
      });

Upvotes: 0

Views: 105

Answers (1)

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

It looks like you are trying to write Angular as though it is jQuery. From what you've described you shouldn't need to manually append elements to the DOM like that, at least not for something as simple as this. Just put the message you want to display in the template and show/hide it based on how many questions you have left (your questions model).

Here's a possible solution just using Angular an ui.bootstrap for the tabs. This is just an example of a possible approach you might take and you will need to adjust it to your particular case but hopefully you will find it helpful.

They key point here is that you should be thinking in terms of adding/removing data from a model and dealing with basic display logic directly inside your template rather than manually adding/removing elements to the DOM a la jQuery.

DEMO

js

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function ($scope, $window) {

  $scope.questions = [
    {
      content: 'What is the capital of Australia?',
      answer: 'Canberra'
    },
    {
      content: 'How many days are there in a week?',
      answer: '7'
    }
  ];

  $scope.answeredQuestions = [];

  $scope.userAnswer = {
    value: ''
  };

  $scope.submitAnswer = function(){

    var userAnswer  = $scope.userAnswer.value,

        // remove the fist question from the array
        question    = $scope.questions.shift();

    question.userAnswer = userAnswer;
    question.result = (question.answer === userAnswer);

    // add the answered question object to the answeredQuestions array
    $scope.answeredQuestions.push(question);

    $scope.userAnswer.value = '';

  };

});

html

<body ng-controller="MainCtrl">

  <tabset>
    <tab heading="Questions">
      <p ng-hide="questions.length">There are no more questions</p>

      <form ng-submit="submitAnswer()" ng-show="questions.length">
        <p>{{questions[0].content}}</p>
        <input type="text" ng-model="userAnswer.value">
        <input type="submit" value="submit answer">
      </form>
    </tab>

    <tab heading="Answered Questions">

      <p ng-hide="answeredQuestions.length">There are no conversations</p>

      <table ng-show="answeredQuestions.length" class="table table-striped">
        <thead>
          <tr>
            <th>Question</th>
            <th>User Answer</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="q in answeredQuestions">
            <td>{{q.content}}</td>
            <td>{{q.userAnswer}}</td>
            <td>{{q.answer}}</td>
            <td>{{q.result ? 'correct' : 'incorrect'}}</td>
          </tr>
        </tbody>
      </table>

    </tab>

  </tabset>

</body>

Upvotes: 1

Related Questions