AngularJS ng-repeat не отображает (Browserify и Watchify в фоновом режиме)

-1

Я пытаюсь создать базовое Угловое приложение с модулем, контроллером и представлением. Я изо всех сил пытаюсь интерпретировать контент внутри «{{}}».AngularJS ng-repeat не отображает (Browserify и Watchify в фоновом режиме)

Я запускаю Browserify, который нажимает все на "./js/bundle.js".

Вот мой код:

index.html

<!DOCTYPE html> 
<html ng-app="showNames"> 
<head> 
    <script src="./js/bundle.js"></script> 
    <title> Help </title> 
</head> 

<body> 
    <h1>Show Those Names</h1> 
     <ul ng-controller="namesController as namesCtrl">   
     <li ng-repeat="name in namesCtrl">{{name.names}}</li> 
     </ul>  
</body> 

</html>

app.js

"use strict"; 

var app = angular.module('showNames', []); 

app.controller('namesController', ['$scope', function($scope){ 
     $scope.names = ["jeff", "jim", "jay", "Please show up"]; 
}]);

Мой браузер визуализирует только {{name.names}}.

Любая идея, что здесь происходит, что мне не хватает или как я могу улучшить свой подход?

Спасибо!

источник

2016-10-21 The Lost Coder

Вы ссылки AngularJS? – ZombieChowder

Любые ошибки в консоли? – Phil

осталось немного деталей о вашей настройке. мы не видим, например, где вам нужно() угловое. взгляните на этот пример проекта https://github.com/sombriks/blogpost-upload-angular-browserify-fngfileupload и на этом пакете. json https://github.com/sombriks/blogpost-etdefense/blob/master/ package.json, чтобы вы могли понять, как сделать минимальную настройку, чтобы заставить работать. – Sombriks

Проблема в том, что в вашем ng-repeat вы пытаетесь получить имя контроллера формы, вы должны использовать свою модель, которая является частью вашего контроллера, то есть: «имя в именах "not" name in namesCtrl ".

"use strict"; 
 

 
var app = angular.module('showNames', []); 
 

 
app.controller('namesController', ['$scope', function($scope){ 
 
     $scope.names = ["jeff", "jim", "jay", "Please show up"]; 
 
}]);

<!DOCTYPE html> 
 
<html ng-app="showNames"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
    <title> Help </title> 
 
</head> 
 

 
<body> 
 
    <h1>Show Those Names</h1> 
 
     <ul ng-controller="namesController as namesCtrl">   
 
     <li ng-repeat="name in names">{{name}}</li> 
 
     </ul>  
 
</body> 
 

 
</html>

источник

2016-10-21 05:24:57

Я использовал это, чтобы исправить свой код, за исключением того, что я полностью избавился от синтаксиса «контроллер как», чтобы не запутать себя при использовании $ scope (т. Е. Ng-controller = "namesController"). Я также заменил тег скрипта, чтобы внести в свой узел и угловой локально. Это было действительно полезно, чтобы понять, как ng-repeat работает с контроллером. –

Неправильный способ работы с ng-repeat.

<li ng-repeat="name in names">{{ name }}</li>

источник

2016-10-21 01:15:13 Hui

Спасибо за кучу ответа! Я немного смутился об итерации и синтаксисе ng-repeat. Я должен помнить, что мы назначаем «имя» в качестве псевдонима для ссылки на свойство $ scope, которое мы хотим перебрать. Так что если бы у меня было что-то вроде ... $ scope.person = [{name: "Bud", age: "21"}, {name: "Spock", age: "162"}] ... в моем HTML I 'd write ...

name: {{person.name}} + age: {{person.age}}

Теперь все намного понятнее. :) –

Ваш код является беспорядок.

Ваш контроллер ссылаются как namesCtrl в шаблоне пока вы назначаете names к $scope. Выберите один подход и придерживайтесь его
Вы повторяете более namesCtrl?
Ваши данные массива являются строками только, они не имеют name свойство

Использование $scope ...

<ul ng-controller="namesController">   
    <li ng-repeat="name in names track by $index">{{name}}</li> 
</ul>

или использовать "контроллер в качестве"

app.controller('namesController', function() { 
    this.names = ["jeff", "jim", "jay", "Please show up"]; 
});

<ul ng-controller="namesController as namesCtrl">   
    <li ng-repeat="name in namesCtrl.names track by $index">{{name}}</li> 
</ul>

источник

2016-10-21 01:15:25 Phil

Спасибо тонну! Я просмотрел слишком много учебников, которые использовали разные подходы, и я смутил синтаксис «контроллер как» и «$ scope». AdditYou очистил это для меня awesomely. –

Спасибо тонну! Я просмотрел слишком много учебников, которые использовали разные подходы, и я смутил синтаксис «контроллер как» и «$ scope». Кроме того, внутри ng-repeat я смутил себя, думая, что итерация будет проходить через все внутри контроллера, а не только xxxxx в «$ scope.xxxxx». Ты прояснил это для меня ужасно! –

Изменен код. Существует несколько ошибок. попробуйте это

<!DOCTYPE html> 
<html ng-app="showNames"> 
<head> 
<script src="./js/bundle.js"></script> 
<title> Help </title> 
</head> 

<body> 
<div ng-controller="namesController as namesCtrl"> 
    <h1>Show Those Names</h1> 
    <ul>   
     <li ng-repeat="name in names">{{name}}</li> 
    </ul> 
</div>  
</body> 

</html>

Ваш app.js в порядке. Я надеюсь, что его вталкивают в bundle.js

источник

2016-10-21 04:55:11 sisyphus

AngularJS ng-repeat не отображает (Browserify и Watchify в фоновом режиме)

ответ

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