Брус понять, почему AngularJS не производит ожидаемые результаты

вот мой код:Брус понять, почему AngularJS не производит ожидаемые результаты

<!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 {{имя}} {{фамилия}}, хотя раньше она была печать что я набрал в коробках. например Если бы я ввел «Eric» в forename, а затем «Mingo» в фамилию, он вернул бы «Hello Eric Mingo».

Во-вторых, во второй части, по какой-то странной причине, он печатает {{x.countries}} так странно. еще более странно, что работает как 5 минут назад.

источник

2015-01-22 BlackMagma

Ну, если угловой не загружается по какой-либо причине, она никогда не будет разобрать выражения, поэтому они будут выводиться непосредственно в HTML. Поэтому вы, вероятно, должны начать с просмотра консоли браузера и посмотреть, есть ли ошибки скрипта. – Claies

Нигде вы не объявляете 'angular.module (" secOne ", [])'. Это то, что Angular ожидает, когда вы делаете 'ng-app =" secOne "'. Также откройте консоль браузера, и вы увидите сообщение об ошибке. Если вы также удалили '.min' из Angular path, тогда сообщение об ошибке было бы еще более наглядным –

, вам не хватает' angular.module ('secOne', []). Controller ('personController', function ($ scope) { ...}); ' – Ifch0o1

Ваша проблема в том, что у вас есть два приложения на одной странице. Например, этот код работает для меня:

<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

источник

2015-01-22 12:37:29 m4t1t0

Я вижу, что вы говорите, и я пытаюсь реализовать это. dont get, однако, почему, когда я вынимаю весь раздел 2 (то есть, что вы оставили в своем коде выше, а затем запустили его, он все равно не работает). есть идеи? можете ли вы проверить вывод консоли или что-то еще? – BlackMagma

Брус понять, почему AngularJS не производит ожидаемые результаты

ответ

Смежные вопросы