Хобрук: Ваш путь к мастерству в программировании

Невозможно использовать ng-if с ng-repeat

Я пытался использовать ng-if внутри ng-repeat, но кажется, что ng-if работает неправильно.

Я сослался на пару ссылок на форум в StackOverflow, но это мне не помогает.

Я использую угловую версию 1.3.0.

HTML

<!DOCTYPE html>
<html ng-app="myModule">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <script src="/js/lib/angular-1.3.0/angular.js"></script>
        <script src="/js/lib/controllers/ifRepeatController.js"></script>
    </head>
    <body>

     <div ng-repeat = "data in comments">
      <div ng-if="data.type == 'hootsslllll' ">
          //differnt template with hoot data
       </div>
      <div ng-if="data.type == 'story' ">
          //differnt template with story data
       </div>
       <div ng-if="data.type == 'article' ">
          //differnt template with article data
       </div> 
     </div>
    </body>
</html>

Контроллер

var myIfRepeat = angular.module('myIfRepeat',[]);


myIfRepeat.controller('IfRepeatController', function ($scope,$http) {

     $scope.comments = [
            {"_id":"1",
               "post_id":"1",
               "user_id":"UserId1",
               "type":"hoot"},  
            {"_id":"2",
               "post_id":"2",
               "user_id":"UserId2",
               "type":"story"},        
            {"_id":"3",
               "post_id":"3",
               "user_id":"UserId3",
               "type":"article"}
          ];

});

Согласно первому условию, первая строка не должна отображаться (см. скриншот ниже для получения дополнительной справки), однако строка отображается.

справочная ссылка: Использование ng-if внутри ng-repeat?

Ng-If

Теперь я добавил контроллер в div, как и советовали, однако столкнулся с той же проблемой.

Ниже я привел скриншот для справки. Пожалуйста, помогите мне, как решить эту проблему, и, пожалуйста, дайте мне знать в случае дальнейших разъяснений.

Новый снимок экрана с контроллером

Ниже приведен скриншот рабочей модели, использующей версию angular 1.3. Если мы используем angular 1.0.2, nf-if не будет работать должным образом (ниже приведен скриншот)

Скриншот рабочей модели

Снимок экрана для угловой версии 1.0.2

введите здесь описание изображения


  • Будьте осторожны: ngIf создает правильную область видимости. groups.google.com/forum/#!msg/angular/kPRzdcrIzNw/ cNaJdguCNeYJ 01.05.2014
  • @Mik378 Извините, не могу ясно понять 01.05.2014
  • Вы пробовали использовать ng-show вместо ngIf? 01.05.2014
  • @ Mik378 Нет, я не пробовал с ng-show, но как использовать ng-if в этом случае. 01.05.2014
  • Если это работает с ng-show, ваша проблема, безусловно, связана с особенностью ng-if, которая не разделяет текущую область, но расширяет ее. Если это не работает с ng-show, то причиной является ваш контекст. @j.wittwer указывает на очень потенциальную причину (причину контекста;)) 01.05.2014

Ответы:


1

У меня нет проблем с этой работой. Ваш код изменен, чтобы соответствовать скрипту.

<div ng-app ng-controller="IfRepeatController">
    <div ng-repeat="data in comments">
        <div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div>
        <div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div>
        <div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div>
    </div>
</div>

function IfRepeatController($scope) {
    $scope.comments = [{
        "_id": "1",
            "post_id": "1",
            "user_id": "UserId1",
            "type": "hoot"
    }, {
        "_id": "2",
            "post_id": "2",
            "user_id": "UserId2",
            "type": "story"
    }, {
        "_id": "3",
            "post_id": "3",
            "user_id": "UserId3",
            "type": "article"
    }];
}

Примечание: ссылка на angular 1.3.0 здесь: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js.

01.05.2014
  • извините, я не понимаю, как это работает для вас. В моем предыдущем посте кода я пропустил контроллер, после чего добавил контроллер и попробовал его, однако столкнулся с той же проблемой. Прикрепил скриншот для ознакомления. пожалуйста, дайте мне знать для получения дополнительной информации. 03.05.2014

  • 2

    Вам не хватает ng-controller:

    <body ng-controller="IfRepeatController">
    
    01.05.2014
  • как и советовали, я добавил контроллер, но все же столкнулся с той же проблемой. В сообщении выше я прикрепил скриншот для дополнительной справки. 03.05.2014
  • извините, я добавил неправильное имя модуля, он отлично работает, прикрепил скриншот для справки 03.05.2014

  • 3

    У меня похожая проблема. Я не могу заставить ng-if работать правильно. Единственный способ заставить его работать — преобразовать ng-if в оператор not (ng-if="!variableValue"). Это проблема версии AngularJS?

    29.09.2014

    4

    Это не проблема версии AngularJs. Если variableValue имеет логическое значение, оно будет работать нормально.

    Пример такого кода:

    $scope.variableValue = true; in Controller
    
    "<"div ng-if="!variableValue" ">"Don't show content"<"/div">"// This DIV doesn't show the content 
    "<"div ng-if="variableValue" ">"show content"<"/div">"  // This DIV will show the content
    
    30.09.2014
    Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..