添加ng控制器時內容會消失

我有一個水果列表，並且能夠使用searchFor過濾器來顯示我搜索的項目。我想單擊一個按鈕，並使用控制器將該項目發送到頁面上的單獨的div。但是，無論何時我將ng-controller添加到頁面（我認爲它應該放在body標籤中），我的水果列表就完全消失了。幫幫我！我一整天都在絞盡腦汁，似乎什麼都沒有起作用！添加ng控制器時內容會消失

<html> 
<head> 
<link rel="stylesheet" text="text/css" href="css/bootstrap.css" 

<script type="text/javascript" src="angular/js/angular.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
</head> 

<body ng-app =""> 
<div ng-init="items = [ 
{type: 'strawberry', name: 'Herbert Strawberry', occupation:   'dogwalker', superpower: 'power-C boost', imageurl: 'images/strawb.jpg' }, 

{type: 'blueberry', name: 'Ulysses Blueberry', occupation: 'construction worker', superpower: 'super strength', imageurl: 'images/blueb.jpg' }, 

{type: 'orange', name: 'Otto Sly Orange', occupation: 'ninja', superpower: 'serious defense', imageurl: 'images/orange.jpg' }, 


]"> 
</div> 

<h2>Summon your Vitamin Power</h2> 
<p>Which of these did you eat today?</p> 
<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(new_item)" ng-disabled="add_item_form.$invalid" class="btn btn-success">Add to Your Arsenal</button> 

<ul class = "item group" ng-repeat= "item in items | filter:searchFor"> 
<div class="adding_item"> 
<li ng-model="adding_item.type"> 
{{ item.type }} 
</li> 
<li ng-model="adding_item.name"> 
{{ item.name }} 
</li> 
<li ng-model="adding_item.occupation" > 
{{ item.occupation }} 
</li> 
<li ng-model="adding_item.superpower"> 
{{ item.superpower }} 
</li> 
<li ng-model="adding_item.imageurl"> 
    <img ng-src ="{{ item.imageurl }}" alt="{{ item.type }}"> 
</li> 
</div> 
</ul> 

</form> 


<div class="arsenal"> 
<h2>Nutrition arsenal</h2> 
{{ item.type }} 
{{ item.name }} 
{{ item.occupation }} 
{{ item.superpower }} 
{{ item.imageurl }} 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> 
<script src="js/app.js"></script> 


<script type="text/javascript"> 
function itemListController($scope){ 

    $scope.items = [ 
    {type: 'strawberry', name: 'herbert', occupation: 'dogwalker 
    ', superpower: 'power-c boost', imageurl: 'images/strawb.jpg' }, 
    {type: 'blueberry', name: 'Ulysses', occupation: 'construction worker', superpower: 'super strength', imageurl: 'images/blueb.jpg' }, 

{type: 'orange', title: 'otto sly', occupation: 'ninja', description: 'serious defense', imageurl: 'images/orange.jpg' } 

    ]; 

    $scope.additem = function(new_item){ 
     $scope.items.push(new_item); 
     $scope.adding_item = {}; 
    }; 

}; 
</script>

來源

2015-04-05 bjorkland

有控制檯錯誤嗎？您正在將'ng-controller ='itemListController''添加到body標籤？ – Huey 2015-04-05 02:24:11

你可以發佈更多的代碼，包括控制器代碼和你試圖應用它的DOM元素嗎？ – 2015-04-05 04:06:11

上面的HTML格式不正確 - 當HTML格式錯誤時（未封閉標籤，缺少標籤等），角度表現不佳。它會做不可預知的壞事。 – 2015-04-05 04:06:37

你並不需要有HTML網頁上的所有代碼，頁面會變得畸形和內容將永遠不會在頁面上呈現。您應該像您一樣分離出JavaScript代碼，將其放在不同的JS文件中，然後在該頁面上提供該腳本文件的參考。

此外，您還沒有申報角度模塊，而在使用ng-app指令前，應先定義角度1.3+所需的angular.module。

angular.module（ '應用'，[]）將在頁面上被應用爲ng-app="app"

標記

<body ng-app="app" ng-controller="itemListController"> 
    <h2>Summon your Vitamin Power</h2> 
    <p>Which of these did you eat today?</p> 
    <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(new_item)" ng-disabled="add_item_form.$invalid" class="btn btn-success">Add to Your Arsenal</button> 

    <ul class="item group" ng-repeat="item in items | filter:searchFor"> 
     <div class="adding_item"> 
     <li ng-model="adding_item.type"> 
      {{ item.type }} 
     </li> 
     <li ng-model="adding_item.name"> 
      {{ item.name }} 
     </li> 
     <li ng-model="adding_item.occupation"> 
      {{ item.occupation }} 
     </li> 
     <li ng-model="adding_item.superpower"> 
      {{ item.superpower }} 
     </li> 
     <li ng-model="adding_item.imageurl"> 
      <img ng-src="{{ item.imageurl }}" alt="{{ item.type }}"> 
     </li> 
     </div> 
    </ul> 
    </form> 

    <div class="arsenal"> 
    <h2>Nutrition arsenal</h2> 
    {{ item.type }} {{ item.name }} {{ item.occupation }} 
    {{ item.superpower }} {{ item.imageurl }} 
    </div> 
</body>

的JavaScript

angular.module('app', []) 
.controller('itemListController', function($scope) { 

    $scope.items = [{ 
    type: 'strawberry', 
    name: 'herbert', 
    occupation: 'dogwalker', 
    superpower: 'power-c boost', 
    imageurl: 'images/strawb.jpg' 
    }, { 
    type: 'blueberry', 
    name: 'Ulysses', 
    occupation: 'construction worker', 
    superpower: 'super strength', 
    imageurl: 'images/blueb.jpg' 
    }, { 
    type: 'orange', 
    title: 'otto sly', 
    occupation: 'ninja', 
    description: 'serious defense', 
    imageurl: 'images/orange.jpg' 
    }]; 

    $scope.additem = function(new_item) { 
    $scope.items.push(new_item); 
    $scope.adding_item = {}; 
    }; 
});

Working Plunkr

來源

2015-04-05 10:44:02

添加ng控制器時內容會消失

回答

相關問題