Question

每当我尝试使用离子服务显示我的列表时，我只是得到一个空白屏幕？我一步一步地按照教程，仍然没有？

我在html中的代码列表：

  <body ng-app="calorific" ng-controller="calCtrl">
<ion-pane>
  <ion-header-bar class="bar bar-header bar-assertive">
    <h1 class="title">Calorific</h1>
  </ion-header-bar>
  <ion-content>
     <ion-list>
  <ion-item ng-repeat="todos in todo"{{todo.name}} </ion-item>
    </ion-list>
  </ion-content>
</ion-pane>

我的JS：

app.controller('calCtrl', function($scope){
$scope.todo = [
    {name: 'apple'},
    {name: 'banana'},
    {name: 'pear'},
    {name: 'kiwi'},
    {name: 'kfc'}
    ]
 })


GET http://localhost:8100/css/style.css 
app.js:17 Uncaught ReferenceError: app is not defined
ionic.bundle.js:19526 Error: [ng:areq] Argument 'calCtrl' is not a function,    got undefined
http://errors.angularjs.org/1.3.13/ng/areq?p0=calCtrl&p1=not%20a%20function%2C%20got%20undefined
at REGEX_STRING_REGEXP (ionic.bundle.js:7982)
at assertArg (ionic.bundle.js:9499)
at assertArgFn (ionic.bundle.js:9509)
at ionic.bundle.js:16350
at ionic.bundle.js:15518
at forEach (ionic.bundle.js:8250)
at nodeLinkFn (ionic.bundle.js:15505)
at compositeLinkFn (ionic.bundle.js:14997)
at publicLinkFn (ionic.bundle.js:14876)
at ionic.bundle.js:9369ionic.bundle.js:19526 (anonymous    function)ionic.bundle.js:16476 $getionic.bundle.js:22421 $get.Scope.$applyionic.bundle.js:9367 bootstrapApplyionic.bundle.js:12104 invokeionic.bundle.js:9365 doBootstrapionic.bundle.js:9385  bootstrapionic.bundle.js:9279 angularInitionic.bundle.js:34044 (anonymous  function)ionic.bundle.js:10663 triggerionic.bundle.js:10933 eventHandler

Answer 1

我认为你的HTML中有拼写错误。不应该像这样，

<ion-item ng-repeat="todos in todo">{{todos.name}} </ion-item>

我还为离子项添加了一个缺失的结束标记。我对Ionic不太熟悉，所以我只想注意一下。

Answer 2

您试图错误地引用todos。

<ion-item ng-repeat="todos in todo"{{todo.name}} </ion-item>

使用todos代替{{todos.name}}：

<ion-item ng-repeat="todos in todo"{{todos.name}} </ion-item>

Answer 3

您的ion-item未关闭。当您在正文中呼叫todos时，您也可以引用todo.name作为单数项目。

首先，我建议您将范围变量重命名为$scope.todos以使用正确的复数形式。然后将ng-repeat重新排序为todo in todos。那是改变

<ion-item ng-repeat="todos in todo"{{todo.name}} </ion-item>

到

<ion-item ng-repeat="todo in todos">{{todo.name}}</ion-item>

除了将scope.todo重命名为scope.todos。

为什么我的列表不会出现使用离子？

3 个答案: