Question

Hy大家，第一个问题在这里。我正在学习angularjs，而现在我已经被困在＆＃34;控制器和范围＆＃34;章节。我试图搜索一个对象数组并显示与我的查询匹配的项目;不幸的是我的屏幕空白。
这是我的代码：

<!DOCTYPE html>
<html ng-app="">
<head>
    <title>Search and print with Scope</title>
</head>
<body>
    <div ng-controller="Controller">
        <input type="search" ng-model="q" placeholder="CPU" />
        <ul>
            <li ng-repeat="proc in cpu | filter:q">
                {{proc.house}} - {{proc.model}}
            </li>
        </ul>
    </div>
    <script src="angular.min.js"></script>
    <script>
        function Controller($scope)
            $scope.cpu = [
            { house: 'Intel', model: 'I7' },
            { house: 'AMD', model: 'Ryzen' },
            { house: 'Qualcomm', modello: 'Snapdragon' }
            ];
    </script>
</body>
</html>

出了什么问题？

编辑EDIT：对于那些可能会看到这个问题的人，我的错误是两次调用ng-app，一次在html标签中，一次在body标签中。

编辑：我又来了;我使用给定的答案修改了代码，但我仍然有一个搜索框和一个空白屏幕。我怀疑是否与代码有关，因为我还试图将其复制并粘贴到一个新文件中，但我得到了相同的结果。可能是什么？
代码在这里：

＆＃13;

<!DOCTYPE html>
<html ng-app="">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script>
    var app = angular.module('demoApp', [])

    app.controller('SimpleController', function($scope) {
      $scope.cpu = [{
          house: 'Intel',
          model: 'I7'
        },
        {
          house: 'AMD',
          model: 'Ryzen'
        },
        {
          house: 'Qualcomm',
          model: 'Snapdragon'
        }
      ];
    });
  </script>
  <title>Search and print with Scope</title>
</head>

<body ng-app="demoApp">
  <div ng-controller="SimpleController">
    <input type="search" ng-model="q" placeholder="CPU" />
    <ul>
      <li>hi</li>
      <li ng-repeat="proc in cpu">
        {{proc.house}} - {{proc.model}}
      </li>
      <li>hi again</li>
    </ul>
  </div>
</body>

</html>

＆＃13;

Answer 1

你需要有一个角度模块和ng-app，如下所述

<强> DEMO

＆＃13;

var app = angular.module('myApp',[])

app.controller('Controller',function($scope){
            $scope.cpu = [
            { house: 'Intel', model: 'I7' },
            { house: 'AMD', model: 'Ryzen' },
            { house: 'Qualcomm', modello: 'Snapdragon' }
            ];
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <html ng-app="myApp">
<head>
    <title>Search and print with Scope</title>
</head>
<body>
    <div ng-controller="Controller">
        <input type="search" ng-model="q" placeholder="CPU" />
        <ul>
            <li ng-repeat="proc in cpu | filter:q">
                {{proc.house}} - {{proc.model}}
            </li>
        </ul>
    </div>
  
</body>
</html>

＆＃13;

Answer 2

首先，您在尝试获取范围数据之前，需要在使用ng-repeat之前加载脚本，因此请在div定义之前移动script。

您还没有正确定义Controller，它应该在app模块中定义，然后绑定HTML中的ng-app和Controller。

<!DOCTYPE html>
<html ng-app="">
<head>
    <title>Search and print with Scope</title>
    <script src="angular.min.js"></script>
    <script>
        var app = angular.module('angularApp',[])

        app.controller('Controller',function($scope){
           $scope.cpu = [
           { house: 'Intel', model: 'I7' },
           { house: 'AMD', model: 'Ryzen' },
           { house: 'Qualcomm', modello: 'Snapdragon' }
           ];
       });
    </script>
</head>
<body ng-app="angularApp">
    <div ng-controller="Controller">
        <input type="search" ng-model="q" placeholder="CPU" />
        <ul>
            <li ng-repeat="proc in cpu | filter:q">
                {{proc.house}} - {{proc.model}}
            </li>
        </ul>
    </div>
</body>
</html>

在angularjs页面中显示范围内的元素

2 个答案: