Question

我已经阅读了其他帖子，表明这些或标签未被封闭或标签后放置了某些内容。我不确定是否有任何其他原因，因为我从第78行到第96行的错误结束标记出错（从ng开关操作系统开始）

<!DOCTYPE html>
<html data-ng-app="">
 <head>
     <title>Lab 3.4 - Registration Form Web App</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,
    initial-scale=1.0" />

     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet" />

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5
    elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the
    page via file:// -->
     <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
     <script src="js/respond.min.js"></script>
     <![endif]-->


     <!-- jQuery – required for Bootstrap's JavaScript plugins) -->
     <script src="js/jquery.min.js"></script>
     <!-- All Bootstrap plug-ins file -->
     <script src="js/bootstrap.min.js"></script>
     <!-- Basic AngularJS -->
     <script src="js/angular.min.js"></script>

</head>

<body>


    <h1>Phone Cloud Registration App</h1>  

    <form>

        <!--Note to self: Labels are associated with input's id and not name attirbute-->
        <p>
            <label for="username">Enter username: </label>
            <input type="text" id ="username" data-ng-model="username"/>
        </p>

        <p>
            <label for="password">Enter password: </label>
            <input type="text" id="password" data-ng-model="password"/>
        </p>

        <p>
            <label for="rpassword">Re-enter password: </label>
            <input type="text" id="rpassword" data-ng-model="rpassword" />

            <span data-ng-show="rpassword != password" data-ng-model-options = "{updateOn: 'blur'}">Password does not match the above.</span>
        </p>

        <br/>

        <h2>Phone Operating System</h2>

        <!--Radio Buttons-->
        <input type="radio" name="OS" value="Android" data-ng-model="OS" required/>Android

        <input type="radio" name="OS" value="IOS" data-ng-model="OS"/>IOS

        <input type="radio" name="OS" value="Windows" data-ng-model="OS"/>Windows

        <p>Phone Model</p>

        <label for="phoneModel">
            Select phone model: 
        </label>

        <!--Drop Down List -->
        <div>

            <select name = "phoneModel" id = "phoneModel">

                <div data-ng-switch = "OS">

                    <div data-ng-init = "AndroidModels = ['HTC 8X','Samsung Galazy 7','Sony Xperia Z5']" data-ng-switch-when = "Android">

                        <option data-ng-repeat = "a in AndroidModels">{{a}}</option>

                    </div>


                    <div data-ng-init = "IOSModels = ['Iphone 6','Iphone 6s','Iphone 6s Plus']" data-ng-switch-when = "IOS">

                        <option data-ng-repeat="b in IOSModels">{{b}}</option>
                    </div>

                    <div data-ng-init = "WindowsModels =['HTC One M9','Microsoft 950','Microsoft 950XL']" data-ng-switch-when="Windows">

                        <option data-ng-repeat = "c in WindowsModels">{{c}}</option>
                    </div>
                </div>
            </select>

        </div>

        <br/>
        <p>Summary</p>

        <ul>
            <li>Username: {{username}}</li>
            <li>OS: {{OS}}</li>
            <li>Phone: {{phoneModel}}</li>
        </ul>

    </form>


    </body>
</html>

*编辑：问题是嵌套<div>标记以及<option>标记内不是<select>的任何其他标记。非常感谢你们。

Answer 1

您应该只将option或optgroup元素直接嵌套在select元素中。

来自MDN的选择元素的允许内容：

零个或多个<option>或<optgroup>元素。

从select中删除所有其他元素，同时我建议从以下属性中删除空格：

data-ng-switch = "OS"应为data-ng-switch="OS"。

流浪的结尾标签，但没有放在或之后

1 个答案: