Question

这是我的代码：

<!DOCTYPE html>
<html>

<head>
<title> test </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<h1> Section One </h1>

<div data-ng-app="secOne" data-ng-controller="personController"> <!-- data-ng-init="forename = 'John'" -->
    <p> What is your forename? <input type="text" data-ng-model="forename"> </p>
    <p> What is your surname? <input type="text" data-ng-model="surname"> </p>
    <p> Hello {{ forename }} {{ surname }} </p>
    <p> Enter a number: <input type="number" data-ng-model="numberOne"> </p>
    <p> Enter another number: <input type="number" data-ng-model="numberTwo"> </p>
    <p> Total of numbers: {{numberOne + numberTwo}}</p>
</div>

<h2> Section Two </h2>
<div data-ng-app="secTwo" ng-init="countries=['Australia', 'Rwanda', 'Chad', 'USA', 'UK', 'Peru', 'Japan', 'China', 'Brazil', 'Poland', 'Croatia']" data-ng-controller="controllerTwo">
    <p><input type="text" ng-model="test"></p>

    <ul>
        <li ng-repeat="x in countries | filter:test">
            {{ x.countries }}
        </li>
    </ul>
</div>


<script>
function personController($scope){
    $scope.surname = "Matthews"
}
</script>
</body>
</html>

首先，在第一部分中，它打印出Hello {{forename}} {{surname}}，尽管它早先打印出我在框中输入的内容。例如如果我输入＆＃39; Eric＆＃39;进入forename然后＆＃39; Mingo＆＃39;进入姓氏就会回归“你好Eric Mingo＆＃39;。

其次在第二部分，由于一些奇怪的原因，它打印出{{x.countries}} 太奇怪了。更奇怪的是，就像5分钟前一样。

Answer 1

您的问题是您在同一页面中有两个应用。例如，此代码适用于我：

<head>
<title> test </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<h1> Section One </h1>

<div ng-app ng-controller="personController">
    <p> What is your forename? <input type="text" data-ng-model="forename"> </p>
    <p> What is your surname? <input type="text" data-ng-model="surname"> </p>
    <p> Hello {{ forename }} {{ surname }} </p>
    <p> Enter a number: <input type="number" data-ng-model="numberOne"> </p>
    <p> Enter another number: <input type="number" data-ng-model="numberTwo"> </p>
    <p> Total of numbers: {{numberOne + numberTwo}}</p>
</div>

<script>
function personController($scope){
    $scope.surname = "Matthews"
}
</script>
</body>
</html>

如果您在同一页面中需要两个应用，则可以阅读以下问题：AngularJS Multiple ng-app within a page

不明白为什么AngularJS没有产生预期的结果

1 个答案: