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

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

javascript html angularjs data-binding

Javascript 在angularjs页面中显示范围内的元素,javascript,html,angularjs,data-binding,Javascript,Html,Angularjs,Data Binding,大家好，第一个问题。我正在学习angularjs，现在我被困在“控制器和范围”一章。我试图通过一组对象进行搜索，并显示与我的查询匹配的项目；不幸的是，我的屏幕保持空白。这是我的密码： <!DOCTYPE html> <html ng-app=""> <head> <title>Search and print with Scope</title> </head> <body> <div

大家好，第一个问题。我正在学习angularjs，现在我被困在“控制器和范围”一章。我试图通过一组对象进行搜索，并显示与我的查询匹配的项目；不幸的是，我的屏幕保持空白。
这是我的密码：

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


搜索并打印范围


{{proc.house}-{{proc.model}


功能控制器（$scope）
$scope.cpu=[
{house:'Intel'，model:'I7'}，
{house:'AMD'，model:'Ryzen'}，
{豪斯：“高通公司”，modello：“Snapdragon”}
];

怎么了

编辑为编辑：对于那些可能会看到这个问题的人，我的错误是调用ng应用程序两次，一次在html标记中，一次在body标记中

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


var app=angular.module（'demoApp'，[]）
app.controller（'SimpleController'，函数（$scope）{
$scope.cpu=[{
豪斯：“英特尔”，
型号：“I7”
},
{
豪斯：“AMD”，
模型：“Ryzen”
},
{
豪斯：“高通公司”，
型号：“Snapdragon”
}
];
});
搜索并打印范围

嗨

{{proc.house}-{{proc.model}

你好

您需要一个角度模块和ng应用程序，如下所述

演示

var-app=angular.module（'myApp'，[]）
应用程序控制器（'controller'，函数（$scope）{
$scope.cpu=[
{house:'Intel'，model:'I7'}，
{house:'AMD'，model:'Ryzen'}，
{豪斯：“高通公司”，modello：“Snapdragon”}
];
});

搜索并打印范围


{{proc.house}-{{proc.model}


首先，您试图在声明范围数据之前获取它，您需要在使用ng repeat
之前加载脚本，因此将脚本移动到div定义之前
此外，如果没有正确定义控制器，则应在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>


搜索并打印范围
var app=angular.module（'angularApp'，[]）
应用程序控制器（'controller'，函数（$scope）{
$scope.cpu=[
{house:'Intel'，model:'I7'}，
{house:'AMD'，model:'Ryzen'}，
{豪斯：“高通公司”，modello：“Snapdragon”}
];
});


{{proc.house}-{{proc.model}


非常感谢您的快速回答如果有帮助，请标记为答案非常感谢您的快速回答