0

I'm quite new to AngularJS, just started with it and I came across ng-switch, where I noticed that this works only on <div> tag, like

<div ng-app="myApp" ng-controller="switchController">
    <div ng-switch on="myData.text">
      <p ng-switch-when="1">Switch To 1</p>
      <p ng-switch-when="2">Switch To 2</p>
      <p ng-switch-default>Switch To Default</p>
    </div>
</div>

when I declare it as below it throws an error!

<div ng-app="myApp" ng-controller="switchController">
    <p ng-switch on="myData.text">
      <p ng-switch-when="1">Switch To 1</p>
      <p ng-switch-when="2">Switch To 2</p>
      <p ng-switch-default>Switch To Default</p>
    </p>
</div>

JavaScript :

angular.module("myApp", [])
        .controller("switchController", function($scope) {
            $scope.myData = {};
            $scope.myData.text = 2;
            console.log($scope.myData.text);
});

PLUNKER DEMO

Devin
  • 7,690
  • 6
  • 39
  • 54
yashhy
  • 2,856
  • 5
  • 31
  • 57

1 Answers1

2

Sorry, posted my comment too early.

This doesn't work because nested <p> tags are invalid HTML.

<div ng-app="myApp" ng-controller="switchController">
    <p ng-switch on="myData.text">
      <p ng-switch-when="1">Switch To 1</p>
      <p ng-switch-when="2">Switch To 2</p>
      <p ng-switch-default>Switch To Default</p>
    </p>
</div>
Sly_cardinal
  • 12,270
  • 5
  • 49
  • 50
  • `

    Hello one

    Hello two

    ` works good. Why do you say nested `

    ` are not valid?

     – yashhy Sep 18 '14 at 06:01
  • http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong – Kalhan.Toress Sep 18 '14 at 06:11
  • However, interestingly, there is nothing about it in the HTML5 spec: http://www.w3.org/TR/html/grouping-content.html#the-p-element (but through other sources, it is still disallowed) – Juha Untinen Sep 18 '14 at 07:37