Question

我正在制作一个简单的程序，但我的div标签之一没有显示，我无法理解为什么

<!DOCTYPE html>
<head>
    <script src="Scripts/angular.min.js"></script>
    <script src="Javascripts/Services.js"></script>
    <script src="Javascripts/MainScript.js"></script>   
    <title></title>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div>
        <table>
            <tr>
                <th>
                    UserId
                </th>
                <th>
                    Id
                </th>
                <th>
                    Title
                </th>
                <th>
                    Body
                </th>
            </tr>
            <tr ng-repeat="x in Posts">
                <td>
                    {{x.userId}}
                </td>
                <td>
                    {{x.id}}
                </td>
                <td>
                    {{x.title}}
                </td>
                <td>
                    {{x.body}}
                </td>
            </tr>
        </table>
    </div>
    <div>
    <input type="button" id="add" value="Add Record"/>
    </div>
     <div id="create">
         <form name="post">
             <table>
                 <tr>
                     <td>UserId</td>
                     <td><input id="userId" ng-model="userId" type="text" /></td>
                 </tr>
                 <tr>
                     <td>Id</td>
                     <td><input id="Id" ng-model="id" type="text" /></td>
                 </tr>
                 <tr>
                     <td>Title</td>
                     <td><input id="Title" ng-model="title" type="text" /></td>
                 </tr>
                 <tr>
                     <td>Body</td>
                     <td><input id="Body" ng-model="body" type="text" /></td>
                 </tr>
                 <tr>
                     <input type="button" class="btn btn-default" value="Save" ng-click="AddPost()">
                 </tr>
             </table>
         </form>
    </div>
</body>
</html>

Js Code

angular.module('MyApp', ['EnukeService'])
        .controller('MyController', function ($scope, MyService) {
            $scope.Posts = {};
            GetAllPosts();

            function GetAllPosts() {
                debugger;
                var getPostsData = MyService.getdata();
                getPostsData.then(function (post) {
                    $scope.Posts = post.data;
                }, function () {
                    alert('Error in getting post records');
                });
            }

            $scope.AddPost = function () {
                var post = {
                    userid: $scope.userId,
                    id: $scope.id,
                    title: $scope.title,
                    body: $scope.body
                }


            var getpostData = newsLetterService.postData(post);
            getpostData.then(function (msg) {
                GetAllNewsLetters();
                alert(msg.data);                
            }, function () {
                alert('Error in adding post record');
            });
            };
            })

包含表单的最后一个div标签没有显示在页面上，如果我遗漏了某些内容，请告诉我早期的第二个div标签也没有显示但后来它开始显示按钮我无法理解这种行为

Answer 1

正如@claies指出的那样，明显错误的标记的一部分是在tr中嵌套除了td / th之外的元素。

<tr>
  <input type="button" class="btn btn-default" value="Save" ng-click="AddPost()">
</tr>

TR中唯一允许的子节点（元素）是“零个或多个或元素，或它们的混合”

- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

当我将代码放入plunker并运行“Beautify your code”时，编辑器甚至完全从输出中删除了input.btn。

您的代码示例可以在此处播放 - https://plnkr.co/edit/AJv8ii6MyrbExlUUeiav?p=preview

其中一个div标签没有显示

1 个答案: