我已经看了好几天了,无法弄清楚为什么我的内容不会填充我页面上的胡子!我得到的唯一错误信息是$ scope未定义,但我不确定问题出在哪里。非常感谢任何帮助 - 谢谢!
itemlistcontroller.js文件:
vegApp.controller('itemListController', function ($scope){
$scope.items = [
{imageurl: 'images/strawb.jpg', type: 'strawberry', name: 'Herbert Strawberry', occupation: 'dogwalker', superpower: 'power-C boost'},
{imageurl: 'images/blueb.jpg', type: 'blueberry', name: 'Ulysses Blueberry', occupation: 'construction worker', superpower: 'super strength' },
{imageurl: 'images/orange.jpg' , type: 'orange', name: 'Otto Sly Orange', occupation: 'ninja', superpower: 'serious defense' }
]});
$scope.new_item = {};
$scope.add_item_error = "";
$scope.additem = function(item){
$scope.items.push( item );
$scope.adding_item = {};
};
console.log('scope', $scope);
]);
app.js文件:
var vegApp = angular.module('vegApp', []);
vegApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'index3.html',
controller: 'itemListController'
})
.when('/login', {
templateUrl: 'partials/login.html',
controller: 'registration'
})
.when('/moreinfo', {
templateUrl: 'partials/moreinfo.html',
controller: 'moreinfo'
})
.when('/recipes', {
templateUrl: 'recipes.html',
controller: 'recipes'
})
.otherwise({
redirectTo: '/login'
});
}
]);
HTML文件:
<html ngApp="vegApp">
<head>
<link rel="stylesheet" text="text/css" href="css/bootstrap.css">
<link rel="stylesheet" text="text/css" href="css/style.css">
<script type="text/javascript" src="angular/js/angular.js"></script>
<script src="text/javascript" src="angular/js/angular-route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body ng-controller='itemListController'>
<ng-view>
<div class="main">
<h2>Summon your Vitamin Power</h2>
<form name="add_item_form" novalidate ng-submit="additem()">
<input type="text" placeholder="what'd you eat?" ng-model="searchFor" ng-required="true"/>
<button ng-click="additem()" ng-disabled="add_item_form.$invalid" class="btn btn-success">Add to Your Arsenal</button>
<ul class = "itemgroup" ng-repeat= "item in items | filter:searchFor">
<div class="adding_item">
<li ng-model="items.imageurl">
<img ng-src ="{{ item.imageurl }}" alt="{{ item.type }}">
</li>
<li ng-model="items.type">
{{ item.type }}
</li>
<li ng-model="items.name">
{{ item.name }}
</li>
<li ng-model="items.occupation" >
{{ item.occupation }}
</li>
<li ng-model="items.superpower">
{{ item.superpower }}
</li>
</div>
</ul>
</form>
</div>
</div>
</ng-view>
</body>
</html>
答案 0 :(得分:0)
更新:
似乎在您的HTML中,您将列表项的ng-model设置为“项目”。这没有意义,因为例如$ scope.items中没有属性'type';这是一个数组。相反,由于“item”已经是对作用域中项目的引用,因此您只需编写ng-model =“item”即可。在你的HTML中。
您的itemListController看起来有点格式错误。您的函数在定义$ scope.items后立即结束,因此$ scope不在您控制台记录$ scope的范围内。尝试用以下内容替换itemlistcontroller.js:
vegApp.controller('itemListController', function ($scope) {
$scope.items = [
{
imageurl: 'images/strawb.jpg',
type: 'strawberry',
name: 'Herbert Strawberry',
occupation: 'dogwalker',
superpower: 'power-C boost'
},
{
imageurl: 'images/blueb.jpg',
type: 'blueberry',
name: 'Ulysses Blueberry',
occupation: 'construction worker',
superpower: 'super strength'
},
{
imageurl: 'images/orange.jpg',
type: 'orange',
name: 'Otto Sly Orange',
occupation: 'ninja',
superpower: 'serious defense'
}
];
$scope.new_item = {};
$scope.add_item_error = "";
$scope.additem = function (item) {
$scope.items.push(item);
$scope.adding_item = {};
};
console.log('scope', $scope);
});