Question

我有一个水果列表，并且能够使用searchFor过滤器显示我搜索过的项目。我想点击一个按钮，然后使用控制器将该项目发送到页面上的单独div。但是，每当我将ng-controller添加到页面时（我认为它应该放在body标签中），我的水果列表就完全消失了。救命！我整天都在绞尽脑汁，似乎什么都没有用!!

<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

您不需要在html页面上拥有所有代码，页面将变得格式错误，内容将永远不会在页面上呈现。你应该把像你这样的东西分开来将JavaScript代码放在不同的JS文件中，然后在页面上提供该脚本文件的参考。

你还没有声明角度模块，而在angular.module指令中使用Angular 1.3 + ng-app之前应该定义它。

angular.module（'app'，[]）将在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

添加ng-controller时内容消失

1 个答案: