簡單的單頁應用程序未運行

我是angular.js的新手，我正在嘗試使用它。任何人都可以告訴我爲什麼這個程序沒有運行？簡單的單頁應用程序未運行

HTML代碼：

<!DOCTYPE html> 
<html ng-app="demoApp"> 

<head> 
    <link data-require="[email protected]*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script data-require="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script> 
    <script data-require="[email protected]>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script data-require="[email protected]*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <h1>Hello Plunker!</h1> 
    <div ng-controller="SimpleController"> 
    Name: 
    <br/> 
    <input type="text" ng-model="name" /> 
    <br/> 
    <ul> 
     <li ng-repeat="cust in customers | filter:name"></li> 
    </ul> 
    </div> 
</body> 

</html>

JS代碼：

// Code goes here 
var demoApp = angular.module ('demoApp', []); 
function SimpleController($scope){ 
    $scope.customers=[ 
    {name:'xx xx' city:'xx'}, 
    {name:'yy yy' city:'yy'}, 
    {name:'zz zz' city:'zz'} 
    ]; 
} 
demoApp.controller('SimpleController', SimpleController);

來源

2015-12-03 the_mishra

請寫下你正在努力達到的目標以及看起來是什麼問題。當您的問題太廣泛時，不要期望開發人員檢查您的代碼。 – OhadM

@any錯誤或不顯示任何內容？ –

你對你有幾個錯誤示例：

主要問題是，當您的應用程序中包含Angular 2.x.x腳本時，您正在使用Angular 1.x.x語法。更改以前版本框架的腳本。

<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" data-semver="1.4.8"></script>

由於屬性之間的分隔逗號缺失，customers對象不是有效的JSON。它應該是這樣的：

$scope.customers=[ 
    {name:'parikshit mishra', city:'jaipur'}, 
    {name:'nirmal vatsyayan', city:'delhi'}, 
    {name:'ningning numeyi', city:'noida'} 
];

你不使用ng-repeat指令顯示任何東西，你只需創建幾個空<li>標籤，因此裏面有他們沒有的內容。你需要顯示你迭代的變量。如果您只想顯示對象的名稱屬性，請使用簡單的點語法。提起
```
<li ng-repeat="cust in customers">{{cust.name}}</li> 
```
您的輸入已ng-model連接，但你不使用綁定到它的變量。您可以使用{{name}}來引用變量。
```
Name: {{name}}<br/> 
<input type="text" ng-model="name"/> 
```

要查看大圖，here's the fixed sample。

來源

2015-12-03 08:09:37

請參考下面的代碼

HTML

<h1>Hello Plunker!</h1> 
    <div ng-controller="SimpleController"> 
     Name: <br/> 
     <input type="text" ng-model="name"/> 
     <br/> 
     <ul> 
     <li ng-repeat="cust in customers| filter:name">{{cust}}</li> 
     </ul> 
    </div>

角

var demoApp = angular.module ('demoApp', []); 
function SimpleController($scope){ 
    $scope.customers=[ 
    {name:'parikshit mishra', city:'jaipur'}, 
    {name:'nirmal vatsyayan', city:'delhi'}, 
    {name:'ningning numeyi', city:'noida'} 
    ]; 
} 
demoApp.controller('SimpleController', SimpleController);

請refer

問題

$scope.customers不是有效object（屬性之間缺少逗號）。
您還沒有在ng-repeat裏顯示過任何物品。請使用。請參閱ng-repeat。
你的plunker內的腳本是錯誤的。

來源

2015-12-03 08:05:25

這裏是小提琴demo。

$scope.customers=[ 
{name:'parikshit mishra', city:'jaipur'}, 
{name:'nirmal vatsyayan', city:'delhi'}, 
{name:'ningning numeyi', city:'noida'} 
];

HTML

<li ng-repeat="cust in customers | filter:name"> 
    {{ cust.name }} 
    </li>

希望這將幫助你

來源

2015-12-03 08:07:20

簡單的單頁應用程序未運行

回答

相關問題