在angularjs頁面的范圍內顯示元素

Question

大家好，第一個問題在這里。 我正在學習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>

怎么了？

編輯：對於那些可能會看這個問題的人，我的錯誤是兩次調用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>

Answer 1

您需要有一個Angular模塊和ng-app，如下所示

DEMO

 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>

Answer 2

首先，您要先聲明作用域數據，然后再使用ng-repeat加載腳本，然后將script移至div定義之前。

另外，您沒有正確定義Controller，應該在app模塊中定義Controller，然后將ng-app和Controller綁定到HTML中。

<!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 個解決方案

解決方案1
3 2017-11-21 09:52:04

解決方案2
2 已采納 2017-11-21 09:57:28

在angularjs頁面的范圍內顯示元素

問題描述

2 個解決方案

解決方案1 3 2017-11-21 09:52:04

解決方案2 2 已采納 2017-11-21 09:57:28

解決方案1
3 2017-11-21 09:52:04

解決方案2
2 已采納 2017-11-21 09:57:28