Условная конструкция в AngularJS

334

19 января 2017, 06:04

Не могу понять почему в этой программе не выполняется условное выражение:

<!DOCTYPE html>
<html ng-app="purchaseApp">
   <head>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
   </head>
   <body ng-controller="purchaseController">
      <div class="page-header">
         <h1> Список дел </h1>
      </div>
      <div class="panel">
         <div class="form-inline">
            <div class="form-group">
               <div class="col-md-8">
                  <input class="form-control" ng-model="caseName" placeholder="Название" />
               </div>
            </div>
            <div class="form-group">
               <div class="col-md-offset-2 col-md-8">
                  <button class="btn btn-default" ng-click="addItem(caseName)">Добавить</button>
               </div>
            </div>
         </div>
         <table class="table table-striped">
            <thead>
               <tr>
                  <th>Дела</th>
               </tr>
            </thead>
            <tbody>
               <tr ng-repeat="case in list.cases">
                  <span ng-if="case.isDone">Hey   </span>
                  <td>{{case.name}}</td>
                  <td><button type="button"><span class="glyphicon glyphicon-ok"></span></button></td>
                  <td><button type="button"><span class="glyphicon glyphicon-remove"></span></button></td>
                  <td><button type="button"><span class="glyphicon glyphicon-trash"></span></button></td>
               </tr>
            </tbody>
         </table>
      </div>
      <script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
      <script>
         var model = {
             cases: [
                 { id: 1, name: "Сходить в магазин за хлебом", isDone: false },
                 { id: 2, name: "Вынести мусор", isDone: false },
                 { id: 3, name: "Победить дракона", isDone: true },
                 { id: 4, name: "Спасти принцессу", isDone: false }
             ]
         };
         var purchaseApp = angular.module("purchaseApp", []);
            purchaseApp.controller("purchaseController", function ($scope) {
            $scope.list = model;
            $scope.addItem = function (caseName) {
                  if(caseName != "") {
                     $scope.list.cases.push({ id: 5, name: caseName, isDone: false });
                  }
             }
         });
      </script>
   </body>
</html>

Строка <span ng-if="case.isDone">Hey </span> не работает. Почему и как сделать, чтобы заработало ? Ссылка на plunker.

Answer 1

У вас же таблица! Так надо: <td ng-if="case.isDone">Hey</td>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

AngularJs обработка input

Здравствуйте

364

javascript

Почему не отображается сразу DateTimePicker?

Почему не отображается сразу календарь в плагине datetimepicker? Сайт плагина, вариант Inline DateTimePicker отображается сразу, у меня на сайте пока не нажмешь...

291

javascript

Как mysql сконнектить с web приложением?

Есть сайт на хостинге PHP+Mysql+JS, решил создать к нему web приложение в PhoneGap и тут же наткнулся на проблемуНе могу понять, как вся необходимая инфа...

319

javascript

CreateProcess failed with error 2

В Webstorm 20163

437