Question

这就是我要做的事情。我正在使用ionic，angular构建应用程序，我有两个选项卡，其中包含用户输入的问题列表。一旦在第一个标签（标签a）上回答了问题，就会使用ng-if隐藏它，因为添加了一个名为“对话”的属性。所以问题从一个标签移动到另一个标签，因为它隐藏在一个标签中，另一个显示在另一个标签中。一切正常。

然而，一旦没有问题，因为它们都隐藏在标签a中，我想要显示一条消息。这是最令人筋疲力尽的试验，我做过的一个错误（主要是错误）。我有不同的指令配置，最近，一个自定义过滤器，似乎没有任何效果。

这是一些实验性代码。我试着在标签上听。（这只是一次尝试。我也尝试过自定义过滤器和该指令的另一种配置）

(define foldl
  (case-lambda
    ;; one list
    [(func init lst)
     (let loop ([result init]
                [rest lst])
       (if (null? rest)
           result
           (loop (func (car rest) result) (cdr rest))))]

    ;; multiple lists
    [(func init list1 . list2+)
     (let loop ([result init]
                [rests (cons list1 list2+)])
       (if (ormap null? rests)
           result
           (loop (apply func (append (map car rests) (list result)))
                 (map cdr rests))))]))

(define foldr
  (case-lambda
    ;; one list
    [(func init lst)
     (let recur ([rest lst])
       (if (null? rest)
           init
           (func (car rest) (recur (cdr rest)))))]

    ;; multiple lists
    [(func init list1 . list2+)
     (let recur ([rests (cons list1 list2+)])
       (if (ormap null? rests)
           init
           (apply func (append (map car rests)
                               (list (recur (map cdr rests)))))))]))

 //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>

Answer 1

看起来你正在尝试编写Angular，就好像它是jQuery一样。根据您所描述的内容，您不应该像这样手动将元素附加到DOM，至少不要像这样简单。只需将要显示的消息放在模板中，然后根据您剩下的问题显示/隐藏它（您的问题模型）。

这里有一个可能的解决方案，只需使用Angular和ui.bootstrap选项卡。这只是您可能采取的一种可能方法的示例，您需要根据具体情况进行调整，但希望您会发现它有用。

这里的关键点是你应该考虑在模型中添加/删除数据并直接在模板中处理基本显示逻辑，而不是手动向DOM添加/删除元素。

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>

在ng-if之后添加消息，删除所有元素

1 个答案: