Question

我是angular.js的新手，我正在尝试着它。谁能告诉我为什么这个程序没有运行？

HTML code：

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

<head>
  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
  <script data-require="jquery@>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="angular.js@*" 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);

Answer 1

请参阅以下代码

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内显示任何内容。请使用{{cust}}。请参阅ng-repeat。
你的plunker内的脚本是错误的。

Answer 2

这是小提琴demo。

<强> JS

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

希望这会对你有所帮助

Answer 3

您的样本中有几个错误：

主要问题是，当您的应用中包含Angular 1.x.x脚本时，您正在使用Angular 2.x.x语法。更改框架的先前版本的脚本。

<script data-require="angular.js@1.4.x" 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>标记，因此其中没有内容。您需要显示迭代的变量。如果只想显示对象的name属性，请使用简单的点语法。
```
<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。

简单的单页面应用程序未运行

3 个答案: