在ng-if後面添加消息如果刪除所有元素

以下是我正在嘗試執行的操作。我正在使用離子，角度來構建應用程序，並且我有兩個選項卡，列出了用戶輸入的問題列表。一旦在第一個選項卡（選項卡a）上回答了一個問題，它會使用ng隱藏 - 如果因爲屬性被添加稱爲「對話」，所以問題從一個選項卡移動到另一個選項卡，通過它隱藏在另一個選項卡中並顯示在另一個選項卡中。這一切工作正常。在ng-if後面添加消息如果刪除所有元素

但是，一旦沒有問題了，因爲它們全都隱藏在標籤a中，我想顯示一條消息。這是最累人的試驗，我曾經犯過一個錯誤（主要是錯誤）。我有不同的指令配置，最近還有一個自定義過濾器，沒有任何東西可以完美工作。

下面是一些實驗代碼。我試着在選項卡上聽。（這只是一個嘗試。我也嘗試過自定義過濾器和該指令的另一配置）

//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); 
       } 
      } 
     });

來源

2015-08-22 Bill Pope

爲什麼不使用UI的路由器，併成立了多頁的形式，類似於https：//開頭威士忌.IO /教程/ angularjs-多步驟外形使用-UI-路由器？使用'elm.find'指令是jQuery風格的做事方式。 – Claies

它看起來像你想寫角，就好像它是jQuery的。根據你所描述的，你不需要像這樣手動向DOM添加元素，至少不需要像這樣簡單的東西。只需將要顯示的消息放入模板中，並根據剩餘的問題（您的問題模型）顯示/隱藏該消息即可。

這是一個可能的解決方案，只需使用Angular即可。這只是您可能採取的一種方法，您需要根據具體情況對其進行調整，但希望您會發現它很有幫助。

他們關鍵的一點是，您應該考慮添加/刪除模型中的數據，並直接在模板中處理基本顯示邏輯，而不是手動向DOM a la jQuery添加/刪除元素。

DEMO

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>

來源

2015-08-22 07:32:47

是的，你是絕對正確的。不幸的是，實施你的建議（或類似的）需要一些相當大的重構 - 我可能不得不從商店添加和檢索數據，因爲我已經設置了一些東西。在一個完美的世界裏，我會做出必要的改變。但現在，我只需要添加/刪除一些消息就可以了。在路上，我可以專注於更持久的解決方案。謝謝你的幫助。 –

在ng-if後面添加消息如果刪除所有元素

回答

相關問題