添加ng-controller时内容消失

Question

I have a list of fruit, and am able to use the searchFor filter to display the item I've searched for. 我有一个水果列表，并且能够使用searchFor过滤器显示我搜索的项目。 I'd like to click a button, and send that item to a separate div on the page, using a controller. 我想单击一个按钮，然后使用控制器将该项目发送到页面上的另一个div。 However, whenever I add ng-controller to the page (I think it's supposed to go in the body tag), my list of fruits completely disappears. 但是，每当我在页面上添加ng-controller（我认为应该在body标签中）时，我的水果列表就会完全消失。 Help! 救命！ I've been racking my brain all day, and nothing seems to be working!! 我整天都在绞尽脑汁，似乎什么也没用！

<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>

Answer 1

You don't need to have all the code on html page, the page will become malformed and content will never get render on the page. 您无需将所有代码都放在html页面上，该页面将变得格式错误，并且内容永远不会在该页面上呈现。 You should separate out the things like you JavaScript code should be placed in different JS file and then will provide reference of that script file on the page. 您应该将JavaScript代码放在不同的JS文件中，然后在页面上提供该脚本文件的引用。

Also you had not declared angular module, while Angular 1.3 + required angular.module should be defined before using it in ng-app directive. 另外，您还没有声明angular模块，而在ng-app指令中使用Angular 1.3 +必需的angular.module前应先对其进行定义。

angular.module('app',[]) will be applied on the page as ng-app="app" angular.module（'app'，[]）将作为ng-app="app"应用于页面

Markup 标记

<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 的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 工作朋克

添加ng-controller时内容消失

问题描述

1 个解决方案

解决方案1
0 2015-04-05 10:44:02

添加ng-controller时内容消失

问题描述

1 个解决方案

解决方案1 0 2015-04-05 10:44:02

解决方案1
0 2015-04-05 10:44:02