文章/答案/技术大牛

发布

社区首页 >问答首页 >当添加ng控制器时，内容将消失。

问当添加ng控制器时，内容将消失。
EN

Stack Overflow用户

提问于 2015-04-05 00:52:48

回答 1查看 1.7K关注 0票数 0

我有一个水果列表，并且能够使用searchFor过滤器来显示我搜索过的项目。我想单击一个按钮，并使用控制器将该项目发送到页面上的一个单独的div。但是，每当我将ng控制器添加到页面(我认为它应该放在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>

angularjs

controller

search-form

回答 1

Stack Overflow用户

发布于 2015-04-05 10:44:02

您不需要将所有代码都放在html页面上，页面将变得格式错误，内容将永远不会在页面上呈现。您应该将JavaScript代码放在不同的JS文件中，然后在页面上提供该脚本文件的引用。

另外，您还没有声明角模块，而在在ng-app指令中使用角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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29453001

复制

相似问题

问当添加ng控制器时，内容将消失。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当添加ng控制器时，内容将消失。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当添加ng控制器时，内容将消失。
EN