Question

我有2个div，angular将以相反的顺序呈现，这是不可预期的。为什么？对我来说似乎是个错误。

enter image description here

<!doctype html>
<html ng-app>
<head>
    <title>Bookshop - Your Online Bookshop</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>

    <div class="container" ng-init="books=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']">
          <h2>Your Online Bookshop</h2>
    <ul class="unstyled">
        <li ng-repeat="book in books">
        {{book}}
        </li>
    </ul>
    </div>



    <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]">
            <h2>Your Online Bookshop</h2>
            <ul class="unstyled">
                    <li ng-repeat="book in books">
                            <span>{{book.name}} written by {{book.author}}</span>
                    </li>
            </ul>
    </div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>

Answer 1

你的代码运行得很完美，但你的books已经被第二个books覆盖了，所以你也可以看到第一个关联键值对象

将第一个更改为book1

<强>演示：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app>
<head>
    <title>Bookshop - Your Online Bookshop</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>

    <div class="container" ng-init="books1=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']">
          <h2>Your Online Bookshop</h2>
    <ul class="unstyled">
        <li ng-repeat="book in books1">
        {{book}}
        </li>
    </ul>
    </div>



    <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]">
            <h2>Your Online Bookshop</h2>
            <ul class="unstyled">
                    <li ng-repeat="book in books">
                            <span>{{book.name}} written by {{book.author}}</span>
                    </li>
            </ul>
    </div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>

AngularJs不尊重html块的顺序

1 个答案: