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

标签 javascript html angularjs data-binding

大家好,第一个问题。 我正在学习 angularjs,现在我陷入了“ Controller 和范围”一章。 我正在尝试搜索对象数组并显示与我的查询匹配的项目;不幸的是我的屏幕保持空白。
这是我的代码:

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

出了什么问题?


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

编辑:我又来了;我使用给定的答案修改了代码,但仍然有一个搜索框和一个空白屏幕。我怀疑与代码相关,因为我也尝试简单地将其复制并粘贴到新文件中,但得到了相同的结果。可能是什么?
代码如下:

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

最佳答案

您需要有一个如下所示的 Angular 模块和 ng-app

演示

var app = angular.module('myApp',[])

app.controller('Controller',function($scope){
            $scope.cpu = [
            { house: 'Intel', model: 'I7' },
            { house: 'AMD', model: 'Ryzen' },
            { house: 'Qualcomm', modello: 'Snapdragon' }
            ];
  });
<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>

关于javascript - 在 angularjs 页面中显示范围内的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47409970/

相关文章:

php - 如何在使用 php curl 发布数据时为每个请求设置不同的 ip 地址

javascript - Flot 无法上传 JSON

javascript - 让客户端浏览器了解事件(如新聊天消息)的最佳方式是什么?

php - 将 PHP 数组传递给 Javascript 数组

html - Bootstrap 3 : Content in a new row is not aligned

angularjs - 由 : java. lang.IllegalStateException : required key [datasource. Sampleapp.hibernate.dialect] 未找到引起

javascript - ExtJS TreeLoader 问题

javascript - 在秒表上按 "stop"后如何停止时间运行

angularjs - Mockjax 在 Angular 应用程序中的使用

javascript - angularjs 复选框显示/隐藏框