数据绑定在AngularJS中不起作用
[英]Data Binding not working in AngularJS
问题描述
Im now to AngularJs and i've created a test app. 
我现在到AngularJs，我已经创建了一个测试应用程序。 I'm using version 1.3.x and i have faced this problem. 我正在使用版本1.3.x，我已经遇到了这个问题。 Here is the code for HtML and JS 这是HtML和JS的代码
var angular.module('ControllerExample', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{ name: 'Customer 1', city: 'Gampaha'},
{ name: 'Customer 2', city: 'Negombo'},
{ name: 'Customer 3', city: 'Gampaha'},
{ name: 'Customer 4', city: 'Gampaha'},
{ name: 'Customer 5', city: 'Kadawatha'}
];
}
<!DOCTYPE html>
<html lang="en" ng-app="ControllerExample">
<head>
<meta charset="utf-8">
<title>AngularJS App</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div ng-controller="SimpleController">
Customer Name:
<input type="text" ng-model="name" />
<h3>Adding a Simple Controller</h3>
<ul>
<li ng-repeat="cust in customers">{{ cust.name | uppercase }} - {{ cust.city }}</li>
</ul>
</div>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
Expected behavior is that when i run the app it should display the list of customers and when i filter it by entering a name in the textbox it should filter. 预期的行为是，当我运行该应用程序时，它应该显示客户列表，并且当我通过在文本框中输入名称进行过滤时，它应该进行过滤。 But it only shows the binding statements. 但是它仅显示绑定语句。 What am i doing wrong here. 我在这里做错了什么。 I've gone through the documentation and used it in my code. 我浏览了文档并在代码中使用了它。 Still doesn't work. 仍然不起作用。 Thanks in advance. 提前致谢。
5 个解决方案
解决方案1
2 2014-09-24 07:07:53
Syntax error. 语法错误。 Just remove the var : 只需删除var ：
angular.module('ControllerExample', []).controller('SimpleController', SimpleController);
解决方案2
1 已采纳 2014-09-24 07:07:54
Try this out:- http://jsfiddle.net/adiioo7/jLLyzm7p/ 试试看： -http : //jsfiddle.net/adiioo7/jLLyzm7p/
var myAppModule= angular.module('ControllerExample', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [{
name: 'Customer 1',
city: 'Gampaha'
}, {
name: 'Customer 2',
city: 'Negombo'
}, {
name: 'Customer 3',
city: 'Gampaha'
}, {
name: 'Customer 4',
city: 'Gampaha'
}, {
name: 'Customer 5',
city: 'Kadawatha'
}];
}
解决方案3
1 2014-09-24 07:21:29
If I well understand you want to filter your customer in function of their names. 如果我很了解，您想按客户的名字过滤客户。
You're just missing to use your name with a filter on the ng-repeat. 您只是想在ng-repeat上使用名称和过滤器而已。
Ex: Add in your controller 例如：添加您的控制器
$scope.nameFilter = function(customer) {
if (!$scope.name) { // in case of name === null
return true;
}
var searchVal = $scope.name,
customerName = customer.name;
var regex = new RegExp('' + searchVal, 'i');
return regex.test(customerName);
}
Now in your template use 现在在您的模板中使用
<li ng-repeat="cust in customers | filter:nameFilter"> <!-- List customers that will match with your filter -->
....
</li>
解决方案4
1 2014-09-24 07:26:30
Running verison.. You dont need var http://jsfiddle.net/adiioo7/jLLyzm7p/ 运行版本。您不需要var http://jsfiddle.net/adiioo7/jLLyzm7p/
<body ng-app="ControllerExample">
<div ng-controller="SimpleController">
Customer Name:
<input type="text" ng-model="name" />
<h3>Adding a Simple Controller</h3>
<ul>
<li ng-repeat="cust in customers">{{ cust.name | uppercase }} - {{ cust.city }}</li>
</ul>
</div>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
angular.module('ControllerExample', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{ name: 'Customer 1', city: 'Gampaha'},
{ name: 'Customer 2', city: 'Negombo'},
{ name: 'Customer 3', city: 'Gampaha'},
{ name: 'Customer 4', city: 'Gampaha'},
{ name: 'Customer 5', city: 'Kadawatha'}
];
}
解决方案5
0 2014-09-24 07:04:47
Try 尝试
cust["name"] cust["city"]
instead of 代替
cust.name
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.